import * as lit from 'lit'; import { LitElement, TemplateResult, ReactiveController, ReactiveControllerHost, CSSResult } from 'lit'; import { IconName } from '@mark/icons'; type Translation = { $lang: string; validation: { required: string; pattern: string; }; navGroupApp: { selected: string; upgrade: string; upgradeLabel: string; }; feedbackDialog: { modalTitle: string; modalTitleSubmitted: string; modalText: string; btnSend: string; btnCancel: string; selectLabel: string; selectPlaceholder: string; textareaLabel: string; textareaPlaceholder: string; successMessage: string; }; password: { hide: string; show: string; }; datepicker: { errorDateAfter: string; errorDateBefore: string; errorInvalidFormat: string; selectMonth: string; selectYear: string; calendarNavigation: string; previousMonth: string; nextMonth: string; previousYear: string; nextYear: string; today: string; selectDate: string; }; }; declare enum ButtonGroupAlign { left = "left", center = "center", right = "right", "space-between" = "space-between" } declare enum ButtonVariant { default = "default", primary = "primary", plain = "plain", danger = "danger" } declare enum ButtonSize { s = "s", m = "m", l = "l" } declare enum ButtonType { submit = "submit", reset = "reset", button = "button" } declare enum IconSize { s = "s", m = "m", l = "l", xl = "xl", xxl = "xxl" } declare enum StackDirection { vertical = "vertical", horizontal = "horizontal" } declare enum StackSpacing { xxs = "xxs", xs = "xs", s = "s", m = "m", l = "l", xl = "xl" } declare enum StackAlignment { start = "start", center = "center", end = "end", stretch = "stretch", between = "between" } declare enum DialogSize { s = "s", m = "m", l = "l", xl = "xl" } declare enum PopoverSize { auto = "auto", s = "s", m = "m", l = "l", xl = "xl" } declare enum BoxSpacing { none = "none", xxs = "xxs", xs = "xs", s = "s", m = "m", l = "l", xl = "xl", xxl = "xxl" } declare enum BoxWidth { default = "default", narrow = "narrow", medium = "medium", wide = "wide" } declare enum DialogVariant { modal = "modal", menu = "menu", promotion = "promotion" } interface AppMenuItem { heading: string; apps: { name: string; id: string; description: string; href?: string; selected?: boolean; purchase?: boolean; }[]; } type AppMenuItems = AppMenuItem[]; declare enum TagVariant { neutral = "neutral", info = "info", danger = "danger", warning = "warning", success = "success", highlight = "highlight" } declare enum AvatarVariant { default = "default", plain = "plain", positive = "positive", negative = "negative", informative = "informative" } interface AriaAttributes { "aria-invalid"?: string; "aria-labelledby"?: string; "aria-errormessage"?: string; "aria-describedby"?: string; "aria-required"?: string; "aria-disabled"?: string; "aria-readonly"?: string; } interface FeedbackDialogOption { value: string; text: string; } type FeedbackDialogOptions = FeedbackDialogOption[]; declare const DefaultFeedbackDialogOptions: FeedbackDialogOptions; interface NavGroupAppClickDetail { name: string; id: string; description: string; groupHeading?: string; } interface NavItem { label: string; href?: string; active?: boolean; disabled?: boolean; icon?: string; children?: NavItem[]; } declare enum PopoverPlacement { top = "top", "top-start" = "top-start", "top-end" = "top-end", right = "right", "right-start" = "right-start", "right-end" = "right-end", bottom = "bottom", "bottom-start" = "bottom-start", "bottom-end" = "bottom-end", left = "left", "left-start" = "left-start", "left-end" = "left-end" } declare enum LinkSize { xxs = "xxs", xs = "xs", s = "s", m = "m" } declare enum DividerSpacing { none = "none", xxs = "xxs", xs = "xs", s = "s", m = "m", l = "l", xl = "xl", xxl = "xxl" } declare enum MenuPlacement { 'top-start' = "top-start", 'top-end' = "top-end", 'bottom-start' = "bottom-start", 'bottom-end' = "bottom-end" } interface MenuItem { label: string; icon?: string; disabled?: boolean; selected?: boolean; onClick?: () => void; variant?: 'plain' | 'danger'; href?: string; } interface MenuGroup$1 { title?: string; items: MenuItem[]; } interface CheckboxItem { label: string; value: string; checked?: boolean; disabled?: boolean; readonly?: boolean; hint?: string; error?: string; } interface RadioItem { label: string; value: string; checked?: boolean; disabled?: boolean; readonly?: boolean; hint?: string; error?: string; name?: string; } declare enum SkeletonVariant { rect = "rect", circle = "circle" } /** * Renders icons for visual cues and interface elements. * @tag m-icon * @attribute {IconName} name - The name of the icon to display. * @attribute {IconSize} size - The size of the icon. * @attribute {string} label - The accessible label for the icon. */ declare class Icon extends LitElement { name?: IconName; size?: IconSize; label?: string; static styles: lit.CSSResult; private renderIcon; render(): lit.TemplateResult<1>; } /** * Layout utility that applies consistent spacing between child elements. * * @slot default - Default content of the stack * @attribute {StackDirection} direction - The direction of the stack (row or column) * @attribute {StackSpacing} spacing - The spacing between stack items * @attribute {StackAlignment} alignment - The alignment of stack items */ declare class Stack extends LitElement { direction: StackDirection; spacing: StackSpacing; alignment: StackAlignment; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * Visual loading indicator for ongoing processes. */ declare class Spinner extends LitElement { size: string; label?: string; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * Lightweight shimmering placeholder for pending content. * * @tag m-skeleton-loader * @prop {"rect" | "circle"} variant - Shape preset used for the placeholder surface. * @prop {string} width - Optional explicit width such as `100%`, `240px`, or `12rem`. * @prop {string} height - Optional explicit height (e.g., `20px`, `1em`). Use 36px to mimic default buttons and 36–44px to mirror avatar sizes from `m-avatar`. * @usage Pair multiple skeletons inside `m-stack` layouts to preserve spacing and rhythm while real content loads. * * Keep the element purely decorative so screen readers ignore it; the internal * span is marked with `aria-hidden="true"` for this reason. */ declare class SkeletonLoader extends LitElement { variant: SkeletonVariant; width?: string; height?: string; updated(changed: Map): void; private syncDimension; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * Displays an icon and message for empty, success, or no-result states. * @slot default - The main text content * @slot icon - Optional slot for custom icon content */ declare class EmptyState extends LitElement { iconName: IconName | undefined; iconSize: IconSize; autoFocus: boolean; fullWidth: boolean; horizontal: boolean; connectedCallback(): void; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * Floating container positioned using the native Popover API. * @tag m-popover * @slot default - Content to be shown in the popover * @slot trigger - The element that triggers the popover * @attribute {boolean} open - Whether the popover is shown * @attribute {'auto' | 'manual'} mode - The popover behavior mode * @attribute {Placement} placement - The preferred placement of the popover * @attribute {boolean} overlay - Whether to show an overlay behind the popover * @attribute {boolean} bottomSheet - Whether to display as a bottom sheet on mobile * @attribute {string} title - The title of the popover * @attribute {boolean} showTitle - Whether to show the header of the popover * @attribute {string} spacing - The spacing of the popover content * @fires {CustomEvent} open-changed - Fired when the popover opens or closes * @function open() - Opens the popover * @function close() - Closes the popover */ declare class Popover extends LitElement { open: boolean; overlay: boolean; mode: 'auto' | 'manual'; placement: PopoverPlacement; title: string; showTitle?: boolean; spacing: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl'; size: PopoverSize; disabled: boolean; shadow: boolean; /** * @internal */ private _bottomSheet; /** * @internal */ private _focusTrap; constructor(); updated(changedProperties: Map): void; firstUpdated(): void; disconnectedCallback(): void; private get popoverElement(); private updatePosition; /** * @internal */ private _handleToggle; /** * Sets the element that should receive initial focus when the popover opens */ setInitialFocus(element: HTMLElement | null): void; /** * @internal */ private _handleTriggerClick; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; show(): void; hide(): void; get bottomSheet(): boolean; set bottomSheet(value: boolean); } /** * Creates a hyperlink to internal or external destinations. * @tag m-link * @slot default - Default content of the link * @attribute {string} href - The URL the link points to * @attribute {string} text - Simple text content for the link * @attribute {string} size - Size variant of the link (xxs, xs, s, m) * @attribute {string} startIcon - Name of the icon to display before the text * @attribute {string} endIcon - Name of the icon to display after the text * @attribute {string} target - Where to open the linked URL (_blank, _self, _parent, _top, or a frame name) * @attribute {string} download - If present, the link will download instead of navigating. Optional string sets suggested filename. */ declare class Link extends LitElement { href: string; text: string; size: LinkSize; startIcon: IconName | undefined; endIcon: IconName | undefined; target: string; download?: string; private getIconSize; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * Displays a list of selectable options in a popover. * @tag m-menu * @slot trigger - The element that triggers the menu * @slot header - Custom header content to be shown at the top of the menu * @slot content - Custom content to be shown in the menu (after groups/items) * @slot buttons - Custom menu buttons to replace the default groups/items * @attribute {boolean} open - Whether the menu is shown * @attribute {Placement} placement - The preferred placement of the menu * @attribute {boolean} overlay - Whether to show an overlay behind the menu * @attribute {boolean} bottomSheet - Whether to display as a bottom sheet on mobile * @fires {CustomEvent} open-changed - Fired when the menu opens or closes * @fires {CustomEvent} item-selected - Fired when a menu item is selected */ declare class Menu extends LitElement { open: boolean; placement: MenuPlacement; groups: MenuGroup$1[]; items: MenuItem[]; disabled: boolean; fullWidth: boolean; title: string; spacing: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl'; size: PopoverSize; private _overlay; private _bottomSheet; get overlay(): boolean; set overlay(value: boolean); get bottomSheet(): boolean; set bottomSheet(value: boolean); static styles: lit.CSSResult; private handleItemClick; private renderGroup; private renderItems; render(): lit.TemplateResult<1>; private hasSlotContent; private hasMenuGroups; firstUpdated(): void; disconnectedCallback(): void; } /** * Groups menu items under optional section titles. * @tag m-menu-group * @slot default - Menu buttons to be grouped * @attribute {string} title - Optional title for the group */ declare class MenuGroup extends LitElement { title: string; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * Use as the root wrapper to provide a consistent, responsive application frame with header, navigation, content, and footer slots. * @tag m-app-layout * @slot header - The header of the app layout. * @slot navigation - The left-side navigation area (aside). * @slot default - The main content of the app layout. * @slot footer - The footer of the app layout. */ declare class AppLayout extends LitElement { /** * @internal */ private navigationSlot; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * Use for a unified, accessible application header with navigation, branding, and user actions. * @tag m-app-header * @slot app-menu - Use a AppMenu component to display the app menu. * @slot logo - Use a link to display link to root of the application. Also use a logo image inside the link. With the height attribute set to 20px. * @slot app-name - Use to display the current application name next to the logo. * @slot additional-navigation - Use a navigation element to display additional navigation. * @slot navigation - Use a navigation element to display the main navigation. */ declare class AppHeader extends LitElement { fluid: boolean; /** * @internal */ private navigationSlot; private additionalNavigationSlot; /** * @internal */ private appMenuSlot; /** * @internal */ private appNameSlot; /** * @internal */ private _t; private static readonly gradeLogoFullSvg; private static readonly gradeLogoCompactSvg; private focusDefaultView; private handleSkipLinkActivate; private handleSkipLinkKeydown; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; private renderDefaultLogo; } /** * Use for a consistent application footer to present for example legal, status, and accessibility information. * @tag m-app-footer * @slot left - Content for the left side of the footer - note use links as direct slotted elements * @slot right - Content for the right side of the footer * @property {boolean} fluid - Whether the footer should be have fluid width or a maximum content width */ declare class AppFooter extends LitElement { fluid: boolean; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * Use to structure a page or view with optional sidebar and main content, ensuring responsive layout and accessibility. * @tag m-view * @slot aside - The sidebar of the view. * @slot main - The main content of the view. * @property {string} size - The width of the view. * @property {string} margin - Additional vertical margin of the view. */ declare class View extends LitElement { size: "xxs" | "xs" | "s" | "m" | "full"; margin: "s" | "m" | "l"; srLabel: string; srLabelAside: string; /** * @internal */ private asideSlot; focusMain(options?: ScrollIntoViewOptions): void; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * Use to arrange UI elements horizontally with consistent spacing for toolbars, button groups, and layouts. * @tag m-horizontal * @slot default - Content to be displayed horizontally * @attribute {string} spacing - The spacing between items (xxs, xs, s, m, l, xl) */ declare class Horizontal extends Stack { spacing: StackSpacing; constructor(); } /** * Use to stack UI elements vertically with consistent spacing in forms, layouts, and content blocks. * @tag m-vertical * @slot default - Content to be displayed vertically * @attribute {string} spacing - The spacing between items (xxs, xs, s, m, l, xl) */ declare class Vertical extends Stack { spacing: StackSpacing; constructor(); } /** * Switches between horizontal and vertical layouts based on container width. * * @slot default - Default content of the switcher * @attribute {StackSpacing} spacing - The spacing between switcher items * @attribute {string} threshold - The container width at which the component switches between layouts (default: 30rem) * @attribute {number} limit - The maximum number of elements allowed in horizontal configuration (default: 4) */ declare class Switcher extends LitElement { spacing: StackSpacing; threshold: string; limit: number; static styles: lit.CSSResult; protected firstUpdated(changedProperties: Map): void; protected updated(changedProperties: Map): void; private updateDynamicStyles; render(): lit.TemplateResult<1>; } /** * Use to semantically group related content with optional title and description, improving structure and accessibility. * @tag m-section * @slot header - Content for the section header, heading element * @slot description - Content for the section description, single paragraph * @slot default - Main content of the section * @attribute {string} aria-label - The aria-label for the section * @attribute {string} role - The role for the section, defaults to "region" * @attribute {string} variant - The variant for the section, defaults to "default" */ declare class Section extends LitElement { ariaLabel: string; role: string; variant: "default" | "box"; /** * @internal */ private titleSlot; private descriptionSlot; private actionSlot; static styles: lit.CSSResult; /** * @internal */ private get box(); render(): lit.TemplateResult<1>; } /** * Displays structured data in rows and columns. */ declare class Table extends LitElement { sortable: boolean; private currentSort; private _mo?; private _isUpdating; /** @internal */ private _t; private _scheduleHeaderUpdate; static styles: lit.CSSResult; connectedCallback(): void; disconnectedCallback(): void; /** * Renders table styles into nearest root. * This is necessary since we do not use shadow DOM. */ private renderStyles; /** * Setup sorting functionality for sortable headers */ private setupSorting; /** * Create a wrapper helper (button + content + icon + SR text) */ private ensureHeaderButton; /** * Update sortable headers with click handlers and icons */ private updateSortableHeaders; /** * Handle header click for sorting */ private handleHeaderClick; /** * Update sort state for a specific header */ private updateHeaderSortState; /** * Update all header sort states */ private updateAllHeaderStates; /** * Opt out of shadow DOM */ protected createRenderRoot(): this; render(): lit.TemplateResult<1>; } /** * Collapsible section for showing summary information and hidden content. * @tag m-details * @slot default - Default content of the details * @slot summary - Summary content of the details * @attribute {boolean} open - Whether the details is open * @attribute {boolean} name - Name details elements to use multiple as an accordion * @attribute {string} caret - Caret icon position, defaults to "start", can be "end" */ declare class Details extends LitElement { open: boolean; name: string; caret: "start" | "end"; variant: "default" | "box"; static styles: lit.CSSResult; /** * Handle the toggle event * @param event - The toggle event * @internal * @private */ private handleToggle; render(): lit.TemplateResult<1>; } /** * Content container with structured header, body, and footer sections. * @tag m-card * @slot default - Default content of the card (body) * @slot header - Header content of the card * @slot header-end - End content in the header (e.g., status tags) * @slot footer - Footer content of the card * @attribute {string} role - The ARIA role for the card, defaults to "article" */ declare class Card extends LitElement { role: string | null; static styles: lit.CSSResult; private headerSlot; private headerEndSlot; private footerSlot; render(): lit.TemplateResult<1>; } /** * A typographic utility that styles all child text elements for consistent long-form reading layouts. * * @tag m-typeset * @slot default - Default slot for content * * @example * ```html * *

Article Title

*

Introduction paragraph with bold and italic text.

*

Section Heading

*
    *
  • First item
    • *
  • Second item
    • *
*
*

Important quote

* Author Name *
* * ``` */ declare class Typeset extends LitElement { /** * Use light DOM instead of shadow DOM to preserve proper parent-child relationships * for accessibility and to allow native HTML elements to be styled directly */ protected createRenderRoot(): this; /** * Renders typeset styles into nearest root. * This is necessary since we do not use shadow DOM. */ private renderStyles; connectedCallback(): void; static styles: lit.CSSResult; } interface InputMixinInterface { name?: string; value?: string; disabled: boolean; readonly?: boolean; placeholder?: string; label?: string; description?: string; hint?: string; error?: string | boolean; required: boolean; fullWidth?: boolean; horizontal?: boolean; labelHidden?: boolean; lang: string; internals: ElementInternals; formValue: any; form: HTMLFormElement | null; validate(): boolean; focus(): void; getDescribedBy(name: string): string | undefined; renderLabel(label: string, labelHidden: boolean, required: boolean, name: string): TemplateResult; renderDescription(description: string, name: string): TemplateResult; renderHint(hint: string, name: string): TemplateResult; renderError(error: string, name: string): TemplateResult; } declare const Button_base: (new (...args: any[]) => InputMixinInterface) & typeof LitElement; /** * Triggers user actions or navigates to linked destinations. * @tag m-button * @slot default - Default content of the button, the text for action * @slot start - Slot before the default content * @slot end - Slot after the default content * @attribute {ButtonType} type - The type of the button * @attribute {ButtonVariant} variant - The visual style of the button * @attribute {ButtonSize} size - Set the size of the button * @attribute {boolean} square - Whether the button is square * @attribute {string} href - Use button as a link * @attribute {string} target - The target attribute for the link * @attribute {string} loading - Indicates whether the button is in a loading state * @fires {Event} click - fired when the button is clicked * @attribute {boolean} underline - Whether the button text should be underlined * @attribute {"left" | "center" | "right"} alignment - The text alignment inside the button * @attribute {boolean} fullWidth - Whether the input should take full width * @attribute {boolean} badge - Whether to show the notification badge dot * */ declare class Button extends Button_base { type: ButtonType; variant: ButtonVariant; size: ButtonSize; square: boolean; href: string | undefined; target: "_self" | "_blank" | "_parent" | "_top"; loading: boolean; alignment: "left" | "center" | "right"; underline: boolean; fullWidth: boolean; badge: boolean; /** * @internal */ private _iconSize; updated(changedProperties: Map): void; /** * Handles the button click event. * Empty implementation allows for future customization. * @private * @internal */ private _onClick; static styles: lit.CSSResult; private renderSpinner; private renderBadge; render(): TemplateResult<1>; private renderLink; private renderButton; /** * @internal */ private _updateSlotIconSizes; /** * @internal */ private _updateIconSizesInSlot; private _updateAllIconSizes; } /** * Groups multiple buttons together for related actions. * * @slot default - Default slot for content * @attribute {ButtonGroupAlign} align - The alignment of the buttons in the group * @attribute { "xs" | "s" | "m" } spacing - The spacing between the buttons in the group * @attribute {string} aria-label - The aria-label of the button group * @attribute {string} role - The role of the button group * @attribute {boolean} wrap - Whether the buttons should wrap to the next line */ declare class ButtonGroup extends LitElement { alignment: ButtonGroupAlign; spacing: "xs" | "s" | "m"; wrap: boolean; ariaLabel: string; role: string; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * Displays a short label or categorization tag. * @tag m-tag * @slot default - Default content of the element * @attribute {IconName} icon - Optional icon to display in the tag * @attribute {TagVariant} variant - Variant of the tag */ declare class Tag extends LitElement { icon?: IconName; variant?: TagVariant; large?: Boolean; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * Banner component displays a message with an icon for success or danger states * @tag m-banner * @slot default - Content for the banner message * @attribute {string} variant - Variant of the banner (success or danger) * @attribute {boolean} fullWidth - Whether the banner should take full width */ declare class Banner extends LitElement { variant: "success" | "danger" | "informative" | "warning"; fullWidth: boolean; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * Displays a summary of form validation errors using danger styling. * @tag m-form-errors * @slot heading - Content for the heading/title (typically an h2 element) * @slot list - Content for the list of error links (typically a ul with li elements containing links) * @attribute {boolean} fullWidth - Whether the component should take full width (inherited from Banner) */ declare class FormErrors extends Banner { constructor(); static styles: lit.CSSResult; connectedCallback(): void; disconnectedCallback(): void; private handleLinkClick; private handleKeyDown; private findLinkElement; private getLinkHref; private findInputComponent; } /** * Displays a circular avatar with initials or an icon fallback. * @tag m-avatar * @attribute {string} initials - User's initials to display (max 2 characters) or full name * @attribute {IconName} icon - Icon to display when no initials are provided * @attribute {string} size - Size of the avatar (s, m, l) * @attribute {boolean} interactive - Whether the avatar is interactive (button) or visual-only (div) * @attribute {string} ariaLabel - Accessibility label for the avatar * @attribute {string} variant - Color variant of the avatar (default, plain) * @attribute {boolean} autoColor - Automatically generate accessible colors based on the name * @fires {CustomEvent} click - Fired when an interactive avatar is clicked */ declare class Avatar extends LitElement { icon?: IconName; size: "s" | "m" | "l"; interactive: boolean; ariaLabel: string; variant: AvatarVariant; private _initials; get initials(): string; set initials(value: string); static styles: lit.CSSResult; render(): lit.TemplateResult<1>; private renderAvatarContent; private getIconSize; private handleClick; } /** * Nav component for grouping navigation elements. Mainly used in [appMenu](?path=/docs/components-appmenu--docs). * @tag m-nav * @slot default - Default content of the element * @prop {string} label - Optional label for the navigation */ declare class Nav extends LitElement { label?: string; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * NavGroup component for grouping navigation items. Always wrap your navigation group in a [nav](?path=/docs/components-nav--docs) component. * @tag m-nav-group * @slot default - Default content of the element * @attribute {string} heading - The heading text for the navigation group */ declare class NavGroup extends LitElement { heading?: string; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * The NavGroupApp component is used to display an application in a [navigation group](?path=/docs/components-navgroup--docs). * @tag m-nav-group-app * @attribute {string} name - Name of the application * @attribute {string} id - ID of the application * @attribute {string} description - Description of the application * @attribute {string} href - URL of the application * @attribute {string} target - Target of the application * @attribute {boolean|string} selected - Whether the application is selected. Can be boolean or string "true"/"false" * @attribute {boolean|string} purchase - Whether the application is not yet purchased for the user. Can be boolean or string "true"/"false" */ declare class NavGroupApp extends LitElement { name: string; id: string; description: string; href?: string; target: string; selected?: boolean; purchase?: boolean; /** * @internal */ private t; constructor(); updated(): void; static styles: lit.CSSResult; private handleClick; render(): lit.TemplateResult<1>; } type SupportedLanguage = "en" | "fi" | "sv" | "da" | "nb" | "nn" | "fr" | "de" | "pl" | "ro" | "nl"; declare class TranslationController implements ReactiveController { private host; private currentLang; private currentTranslations; constructor(host: ReactiveControllerHost); hostConnected(): void; hostDisconnected(): void; /** * Gets the current language from the HTML lang attribute or browser settings */ private getCurrentLanguage; /** * Gets a translation value by key path */ private getTranslationValue; /** * Gets translations for the current language */ get translations(): any; } /** * Primary navigation component for application-level navigation. * @tag m-main-navigation * @slot default - Navigation items (m-nav-item components) * @attribute {object} navigationData - Navigation data object with mainNav array * @attribute {string} activeItem - Currently active navigation item * @attribute {string} ssrCurrentPage - SSR fallback for current page */ declare class MainNav extends LitElement { navigationData?: { mainNav: NavItem[]; subNav?: NavItem[]; currentPage: string; currentLevel: 1 | 2 | 3; }; activeItem?: string; ssrCurrentPage?: string; private isMobile; private _mediaQuery?; private _onMediaChange; /** @internal */ protected _t: TranslationController; /** @internal */ private _mobileFocusTrap; private mobileLevel; private mobileParent1; private mobileParent2; private _lastSyncData?; private initMobileDetection; private getCurrentPage; /** * Recursively find the label of the active navigation item */ private findActiveLabel; private getSlottedNavItems; private handleNavItemClick; connectedCallback(): void; disconnectedCallback(): void; static styles: lit.CSSResult[]; render(): lit.TemplateResult<1>; private renderDesktopNavigation; private renderMobileNavigation; private renderMobileLevel1; private renderMobileLevel2; private renderMobileLevel3; private renderMobileSubLevel; private syncMobileLevelToRoute; private resetMobileState; private onMenuOpenChanged; private activateMobileFocusTrap; updated(changed: Map): void; private openSubmenuL1; private openSubmenuL2; private backToLevel1; private backToLevel2; private hasActiveDescendant; private renderNavigationDataItems; private closeMobileMenu; } /** * Navigation item used within the main navigation menu. * @tag m-nav-item * * @prop {string} href - The URL for the navigation item * @prop {string} label - The text label for the navigation item * @prop {boolean} active - Whether this item is currently active * @prop {boolean} disabled - Whether this item is disabled * @prop {string} icon - Optional icon name to display */ declare class MainNavItem extends LitElement { href?: string; label?: string; active: boolean; disabled: boolean; private isMobile; private _mediaQuery?; private _onMediaChange; connectedCallback(): void; disconnectedCallback(): void; private initMobileDetection; static styles: lit.CSSResult[]; render(): lit.TemplateResult<1>; private handleClick; } /** * Secondary navigation component for left-side page navigation. * @tag m-sub-navigation * * @prop {string} navTitle - Optional title for the sub navigation * @prop {boolean} fullHeight - Whether the navigation should take full height * @prop {string} width - Width of the navigation (default: 280px) * @prop {NavItem[]} items - (NEW) Level-2 items to render; each may have children (level-3) * * Behavior: * - If `items` is provided: renders dynamic 2-level sidebar with drill-in to level-3. * - If `items` is not provided: falls back to rendering the default . */ declare class SubNav extends LitElement { navTitle?: string; fullHeight: boolean; width: string; items?: NavItem[]; private viewLevel; private parentIndex; /** @internal */ protected _t: TranslationController; private handleNav; updated(changed: Map): void; private syncToActive; private openChild; private backToLevel2; static styles: lit.CSSResult[]; render(): lit.TemplateResult<1>; private renderDynamic; private renderLevel2; private renderLevel3; } /** * Navigation item used within a sub-navigation menu. * @tag m-sub-nav-item * * @prop {string} href - The URL for the navigation item * @prop {string} label - The text label for the navigation item * @prop {boolean} active - Whether this item is currently active * @prop {boolean} disabled - Whether this item is disabled * @prop {string} icon - Optional icon name to display */ declare class SubNavItem extends LitElement { href?: string; label?: string; active: boolean; disabled: boolean; icon?: string; static styles: lit.CSSResult[]; render(): lit.TemplateResult<1>; private handleClick; } /** * Modal overlay for presenting content, actions, or menus. * @tag m-dialog * @slot default - Default content of the dialog * @slot header - Slot for the header content * @slot footer - Slot for the footer content * @attribute {boolean} open - Whether the dialog is open * @attribute {DialogSize} size - The size of the dialog * @attribute {DialogVariant} variant - The variant of the dialog * @attribute {boolean} hideTitle - Whether to hide the title * @attribute {boolean} closable - Whether the dialog has close button in header * @attribute {boolean} modal - Whether the dialog is modal * @fires {CustomEvent<{ open: boolean }>} close - Event fired when the dialog is closed */ declare class Dialog extends LitElement { open: boolean; hideTitle: boolean; closable: boolean; modal: boolean; size: DialogSize; variant: DialogVariant; /** * @internal */ private dialogElement; private _focusTrap; constructor(); firstUpdated(): void; updated(changedProperties: Map): void; /** * @internal */ private handleDialogClose; /** * @internal */ private handleDialogClick; /** * @internal */ private updateDialogState; /** * Shows the modal programmatically */ openModal(): void; /** * Closes the modal programmatically */ closeModal(): void; private updateFooterVisibility; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; private handleFooterSlotChange; } /** * Dialog for promoting product-led features and services. * @tag m-promotion-dialog * @slot default - Default content of the dialog * @slot header - Slot for the header content * @slot footer - Slot for the footer content * @attribute {boolean} open - Whether the dialog is open * @fires {CustomEvent<{ open: boolean }>} close - Event fired when the dialog is closed */ declare class PromotionDialog extends Dialog { constructor(); } /** * Enable seamless navigation between different applications within our product ecosystem *

* Also check out patterns from [Discovery & Engagement →](?path=/docs/patterns-discovery-engagement--docs) * @tag m-app-menu * @slot default - Default content of the app menu * @slot footer - Footer content of the app menu * @slot activator - Custom element that triggers the app menu (defaults to a button with dots icon) * @attribute {boolean} open - Controls whether the modal is open * @attribute {AppMenuItems} items - The items to display in the app menu * @fires {CustomEvent<{ open: boolean }>} close - Fired when the modal is closed */ declare class AppMenu extends LitElement { items: AppMenuItems; open: boolean; position: "bottom" | "right"; disabled: boolean; /** * @internal */ private _t; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; /** * @internal */ private renderContent; /** * @internal */ private renderFromItems; /** * @public */ openModal(): void; /** * @public */ closeModal(): void; /** * @internal */ private handleOpenChange; updated(changedProperties: Map): void; } /** * Collects structured user feedback with topic selection and description. */ declare class FeedbackDialog extends LitElement { options: FeedbackDialogOptions; open: boolean; loading: boolean; submitted: boolean; private _t; updated(changedProperties: Map): void; private get renderedOptions(); private closeModal; private handleFormSubmit; private handleFormError; private submitForm; private renderSubmittedState; private renderFormState; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * Promotion banner supporting product-led growth and feature discovery. * @tag m-app-promotion * @slot heading - Heading content with appropriate level * @slot image - Image to display in the banner * @slot default - Default content of the element * @slot actions - Actions to display in the banner */ declare class AppPromotion extends LitElement { /** * @internal */ private hasImage; /** * @internal */ private hasActions; handleImage(event: Event): void; handleActions(event: Event): void; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * Visual indicator showing task or process completion progress. * @tag m-progress-bar * @slot icon - Optional icon content * @slot text - Optional text content * @attribute {number} value - Current progress value (0-100) * @attribute {boolean} striped - Whether to show striped pattern */ declare class ProgressBar extends LitElement { value: number; striped: boolean; private iconSlot; private textSlot; static styles: lit.CSSResult; private get clampedValue(); private get fillWidth(); render(): lit.TemplateResult<1>; } /** * Displays progress through a sequence of steps. * * * @tag m-stepper * @slot default - Default slot for step items (li elements or m-stepper-step components) * @attribute {string} label - Accessible label for the stepper (aria-label) */ declare class Stepper extends LitElement { /** Accessible label for the stepper */ label?: string; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * Represents an individual step with name and status. * * @tag m-stepper-step * @slot name - Slot for step name/title * @slot status - Slot for step status/description * @attribute {number} step - Step number (1-based) * @attribute {boolean} active - Whether this step is currently active * @attribute {boolean} completed - Whether this step has been completed */ declare class StepperStep extends LitElement { /** Step number (1-based) */ step?: number; /** Whether this step is currently active */ active: boolean; /** Whether this step has been completed */ completed: boolean; private nameSlot; private statusSlot; private _t; static styles: lit.CSSResult; connectedCallback(): void; protected updated(changedProperties: Map): void; private updateAriaAttributes; private getAvatarVariant; private renderAvatar; render(): lit.TemplateResult<1>; } /** * Vertical layout component with centered, prominent content. * * @slot header - Header content of the hero * @slot default - Default content of the hero (main content) * @slot action - Action content of the hero (buttons, links, etc.) * @slot footer - Footer content of the hero * @property {string} size - The width of the hero content. */ declare class Hero extends LitElement { size: "xxs" | "xs" | "s" | "m" | "full"; /** * @internal */ private headerSlot; /** * @internal */ private actionSlot; /** * @internal */ private footerSlot; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } type FormMethod = "get" | "post"; /** * Wraps inputs to manage validation, submission, and reset behavior. * * @tag m-form * * @event form-submit - Emitted when the form is successfully submitted with validated data. * @event form-error - Emitted when form validation fails. * @event form-reset - Emitted when the form is reset to its initial state. */ declare class Form extends LitElement { /** Stores the default values of inputs at initialization. */ private defaultValues; private _t; srLabel?: string; action?: string; method: FormMethod; /** * Lifecycle hook: Invoked when the component is first connected to the DOM. * Initializes the `defaultValues` by collecting the initial state of all inputs. */ connectedCallback(): void; /** * Collects the form data from all inputs and components with a `name` attribute. * @returns {Record} An object containing form data. */ private collectFormData; /** * Validates all child inputs. Supports both native HTML5 validation and custom `validate` methods. * @returns {boolean} True if all inputs are valid, false otherwise. */ private validateForm; private createAndSubmitForm; /** * Handles form submission. * If action is set, allows native form submission. * Otherwise emits a `form-submit` event with collected data if validation passes. * Emits a `form-error` event if validation fails. */ handleSubmit(event?: SubmitEvent): void; /** * Resets all inputs to their initial values and clears any validation errors. * Emits a `form-reset` event. */ handleReset(): void; static styles: lit.CSSResult; /** * Form template. * Provides a default slot for child elements and a named slot for custom buttons. */ render(): lit.TemplateResult<1>; } /** * Groups related form controls with optional legend for accessibility. * @tag m-fieldset * @slot legend - Content for the fieldset legend * @slot default - Main content of the fieldset (form inputs) */ declare class Fieldset extends LitElement { /** * @internal */ private legendSlot; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } declare const Checkbox_base: (new (...args: any[]) => InputMixinInterface) & typeof LitElement; /** * Allows selecting one or more options from a list. * @tag m-checkbox * @slot label - Default content of the checkbox, the text for action * @attribute {string} label - The label for the checkbox * @attribute {string} hint - The hint for the checkbox * @attribute {string} error - The error for the checkbox * @attribute {boolean} checked - Whether the checkbox is checked * @attribute {boolean} labelHidden - Whether the label is hidden * @attribute {boolean} readonly - Whether the checkbox is readonly * @attribute {boolean} required - Whether the checkbox is required * @attribute {boolean} indeterminate - Whether the checkbox is indeterminate * @attribute {string} description - The description for the checkbox * @attribute {boolean} disabled - Whether the checkbox is disabled * @attribute {boolean} fullWidth - Whether the checkbox is full width * @attribute {boolean} horizontal - Whether the checkbox is horizontal * @attribute {boolean} labelHidden - Whether the label is hidden * @attribute {boolean} readonly - Whether the checkbox is readonly * @attribute {string} return-value-checked - Custom return value when checkbox is checked (useful for Rails and similar frameworks) * @attribute {string} return-value-unchecked - Custom return value when checkbox is unchecked (useful for Rails and similar frameworks) */ declare class Checkbox extends Checkbox_base { label?: string; hint?: string; error?: string | boolean; checked: boolean; labelHidden: boolean; readonly: boolean; required: boolean; indeterminate: boolean; description?: string; fullWidth: boolean; horizontal: boolean; returnValueChecked?: string; returnValueUnchecked?: string; /** @internal */ private hasError; static styles: lit.CSSResult[]; render(): lit.TemplateResult<1>; /** @internal */ get formValue(): string | undefined; updated(changedProperties: Map): void; private handleChange; /** @internal */ protected updateFormValue(): void; /** * Validates the checkbox by checking if it meets the required constraint. * @returns {boolean} True if valid, false otherwise. */ checkValidity(): boolean; /** * Gets the validation message, prioritizing translated messages over native browser messages. * @returns {string} The validation message. */ get validationMessage(): string; } declare const CheckboxGroup_base: (new (...args: any[]) => InputMixinInterface) & typeof LitElement; /** * Groups related checkboxes into a single logical unit. * @tag m-checkbox-group * @slot default - Content for the checkbox group * @attribute {CheckboxItem[]} items - Array of checkbox items to display * @attribute {string} name - Name attribute for the checkbox group * @attribute {string} label - Label for the checkbox group * @attribute {string} hint - Hint text for the checkbox group * @attribute {string} error - Error message for the checkbox group */ declare class CheckboxGroup extends CheckboxGroup_base { label?: string; hint?: string; error?: string; description?: string; required: boolean; disabled: boolean; readonly: boolean; horizontal: boolean; items: CheckboxItem[]; /** @private */ private _t; /** @internal */ protected get t(): TranslationController; /** @internal */ private hasHint; /** @internal */ private hasError; /** @internal */ private hasDescription; /** @internal */ private hasLabel; /** @private */ private _slotEl?; static styles: lit.CSSResult[]; render(): lit.TemplateResult<1>; private renderItems; private handleItemChange; /** @internal */ get formValue(): string | null; firstUpdated(changedProperties: Map): void; updated(changedProperties: Map): void; private getSlottedCheckboxes; private syncSlottedCheckboxes; private onSlottedCheckboxChange; /** @internal */ protected updateFormValue(): void; /** * Validates the checkbox group state and sets a custom error message if invalid. */ validate(): boolean; } declare const RadioGroup_base: (new (...args: any[]) => InputMixinInterface) & typeof LitElement; /** * Groups radio buttons to enforce single-option selection. */ declare class RadioGroup extends RadioGroup_base { label?: string; hint?: string; error?: string; description?: string; required: boolean; disabled: boolean; readonly: boolean; horizontal: boolean; items: RadioItem[]; private _t; protected get t(): TranslationController; private hasError; private hasLabel; private hasHint; private hasDescription; private _slotEl?; static styles: lit.CSSResult[]; render(): lit.TemplateResult<1>; private renderItems; private getItemRadios; private getSlottedRadios; private uncheckAllExcept; private handleItemChange; /** @internal */ get formValue(): string | null; firstUpdated(changed: Map): void; updated(changed: Map): void; /** @internal */ protected updateFormValue(): void; validate(): boolean; checkValidity(): boolean; get validationMessage(): string; private syncSlottedRadios; private onSlottedRadioChange; } declare const Select_base: (new (...args: any[]) => InputMixinInterface) & typeof LitElement; /** * Dropdown input for selecting one option from a list. * @tag m-select */ declare class Select extends Select_base { label?: string; labelHidden?: boolean | undefined; required: boolean; hint?: string; error?: string; icon?: string; fullWidth: boolean; description?: string; horizontal: boolean; /** * Handles the select onChange event. * Updates the component's value based on the selected option. * Dispatches a 'change' event to notify parent components of the change. * @param event - The change event triggered by the select element. * @private * @internal */ private _onChange; /** * Retrieves all option elements within the select. * @returns {HTMLOptionElement[]} An array of option elements. * @private */ private get options(); /** * Gets the text of the currently selected option * @returns {string} The text of the selected option or empty string if none selected * @private */ private getSelectedOptionText; /** * Renders an option element for the select dropdown. * @param option - The option element to render. * @returns {TemplateResult} The rendered option element. */ private renderOption; static styles: lit.CSSResult[]; render(): lit.TemplateResult<1>; } declare const Textarea_base: (new (...args: any[]) => InputMixinInterface) & typeof LitElement; /** * Multi-line text input for longer user-entered content. * @tag m-textarea * * @prop {boolean} disabled - Whether the textarea is disabled */ declare class Textarea extends Textarea_base { /** * @property {string} label - The label for the textarea. * @property {string} name - The name of the textarea, used in form submissions. * @property {string} hint - A hint to help the user understand what to enter. * @property {string} description - A description providing additional context. * @property {boolean} required - Whether the textarea is required for form submission. * @property {boolean} disabled - Whether the textarea is disabled. * @property {boolean} labelHidden - Whether the label is visually hidden. * @property {string} error - An error message to display when validation fails. * @property {boolean} fullWidth - Whether the textarea should take the full width of its container. * @property {boolean} horizontal - Whether the layout is horizontal. */ label?: string; name?: string; hint?: string; description?: string; required: boolean; disabled: boolean; labelHidden: boolean; error?: string; fullWidth: boolean; horizontal: boolean; private handleInput; private handleBlur; static styles: lit.CSSResult[]; render(): lit.TemplateResult<1>; } declare class SlotController implements ReactiveController { protected host: ReactiveControllerHost & HTMLElement; slotName: string; private selector; private observer; constructor(host: ReactiveControllerHost & HTMLElement, slotName?: string); hostConnected(): void; hostDisconnected(): void; get hasContent(): boolean; get isEmpty(): boolean; get content(): Element | null; get assigned(): Element[]; } declare const InputText_base: (new (...args: any[]) => InputMixinInterface) & typeof LitElement; /** * Single-line text input field for short user input. * @tag m-input-text * * @prop {string} type - The type of input (text, email, password, etc.) * @prop {string} pattern - The pattern attribute for validation * @prop {string} label - Label text for the input * @prop {string} name - Name of the input * @prop {string} description - Description text below the label * @prop {string} hint - Hint text shown below the input * @prop {boolean} required - Whether the input is required * @prop {boolean} disabled - Whether the input is disabled * @prop {boolean} labelHidden - Whether to visually hide the label * @prop {string} error - Error message to display * @prop {boolean} fullWidth - Whether the input should take full width * @prop {boolean} horizontal - Whether to use horizontal layout * @prop {string} icon - Icon name to display before the input */ declare class InputText extends InputText_base { type: "text" | "email" | "password" | "number" | "tel" | "url" | "search" | "date" | "time" | "datetime-local" | "month" | "week"; pattern?: string; label?: string; name?: string; description?: string; hint?: string; required: boolean; disabled: boolean; labelHidden: boolean; error?: string; fullWidth: boolean; horizontal: boolean; autocomplete?: string; icon?: string; static styles: lit.CSSResult[]; /** @internal */ protected _t: TranslationController; /** @internal */ hasDescription: SlotController; hasHint: SlotController; hasError: SlotController; hasButton: SlotController; /** @internal */ protected handleInput(event: Event): void; /** @internal */ protected handleBlur(): void; /** * Validate the input's value. * @returns {boolean} True if valid, false otherwise. */ validate(): boolean; render(): lit.TemplateResult<1>; } declare const Password_base: (new (...args: any[]) => InputMixinInterface) & typeof LitElement; /** * Password input field with optional show and hide functionality. * @tag m-password * * @prop {string} label - Label text for the input * @prop {string} name - Name of the input * @prop {string} hint - Hint text shown below the input * @prop {boolean} required - Whether the input is required * @prop {boolean} disabled - Whether the input is disabled * @prop {boolean} labelHidden - Whether to visually hide the label * @prop {string} error - Error message to display * @prop {boolean} fullWidth - Whether the input should take full width * @prop {string} autocomplete - The autocomplete attribute for the input */ declare class Password extends Password_base { private showPassword; label?: string; name?: string; description?: string; hint?: string; error?: string; required: boolean; disabled: boolean; labelHidden: boolean; fullWidth: boolean; horizontal: boolean; autocomplete?: string; /** @internal */ protected _t: TranslationController; protected handleButtonClick(): void; protected handleInput(event: Event): void; protected handleBlur(): void; render(): lit.TemplateResult<1>; } /** * Date selection input with calendar popover and trigger button. * @tag m-datepicker * @prop {String} buttonIcon - Icon name for the calendar button * @prop {String} buttonAriaLabel - Aria label for the calendar button * @prop {Date} selectedDate - Selected date * @prop {Date} displayedMonth - Displayed month * @prop {String} locale - Locale for the datepicker */ declare class DatePicker extends InputText { buttonIcon: string; buttonAriaLabel: string; private selectedDate; private displayedMonth; locale: string; format: string; min: string; max: string; private showTitle; private calendarElement?; required: boolean; disabled: boolean; labelHidden: boolean; fullWidth: boolean; horizontal: boolean; constructor(); private getDateRangeError; handleInput(event: Event): void; private getDaysInMonth; private getFirstDayOfMonth; private previousMonth; private nextMonth; private handleDateSelect; private handleMonthSelect; private handleYearSelect; private getLocalizedWeekdays; private getLocalizedMonth; private getLocalizedMonthLong; private findAndFocusDateButton; protected handleKeyDown(event: KeyboardEvent): void; private parseISODate; private isDateInRange; private renderCalendarDates; private renderYearOptions; private get buttonAriaLabelWithDate(); render(): lit.TemplateResult<1>; static styles: CSSResult[]; private get popoverElement(); private handleResponsiveLayout; connectedCallback(): void; disconnectedCallback(): void; } declare const InputMonth_base: (new (...args: any[]) => InputMixinInterface) & typeof LitElement; /** * Input control for selecting a month and year. * @tag m-input-month * * @prop {string} value - The value in ISO YYYY-MM format (e.g., "2024-10") * @prop {string} label - Label text for the input * @prop {string} name - Name of the input * @prop {string} description - Description text below the label * @prop {string} hint - Hint text shown below the input * @prop {boolean} required - Whether the input is required * @prop {boolean} disabled - Whether the input is disabled * @prop {boolean} labelHidden - Whether to visually hide the label * @prop {string} error - Error message to display * @prop {boolean} fullWidth - Whether the input should take full width * @prop {boolean} horizontal - Whether to use horizontal layout * @prop {string} min - Minimum date in ISO YYYY-MM format (default: "2000-01") * @prop {string} max - Maximum date in ISO YYYY-MM format (default: "2040-01") */ declare class InputMonth extends InputMonth_base { label?: string; name?: string; description?: string; hint?: string; required: boolean; disabled: boolean; labelHidden: boolean; error?: string; fullWidth: boolean; horizontal: boolean; min: string; max: string; private localMonth; private localYear; /** @internal */ protected _t: TranslationController; static styles: lit.CSSResult[]; /** @internal */ protected firstUpdated(): void; /** @internal */ protected updated(changedProperties: Map): void; /** * Sync localMonth and localYear from the value prop * @private */ private _syncFromValue; /** * Map language code to locale string for date formatting * @private */ private getLocale; /** * Get localized month name * @param monthIndex - Month index (0-11) * @returns Localized month name * @private */ private getLocalizedMonthLong; /** * Generate month options * @private */ private getMonthOptions; /** * Generate year options from min to max * @private */ private getYearOptions; /** * Handle select change * @private */ private handleSelectChange; /** * Update the value prop from localMonth and localYear * @private */ private _updateValue; /** * Handle blur event * @private */ private handleBlur; /** * Validate the input's value. * @returns {boolean} True if valid, false otherwise. */ validate(): boolean; render(): lit.TemplateResult<1>; } declare const Radio_base: (new (...args: any[]) => InputMixinInterface) & typeof LitElement; /** * Single-selection input option used within a radio group. */ declare class Radio extends Radio_base { label?: string; hint?: string; error?: string | boolean; checked: boolean; labelHidden: boolean; readonly: boolean; required: boolean; description?: string; /** @internal */ private hasHint; /** @internal */ private hasError; /** @internal */ private hasDescription; static styles: lit.CSSResult[]; render(): lit.TemplateResult<1>; /** * Validates the radio button state and sets a custom error message if invalid. */ validate(): boolean; /** * Validates the radio button by checking if it meets the required constraint. * @returns {boolean} True if valid, false otherwise. */ checkValidity(): boolean; /** * Gets the validation message, prioritizing translated messages over native browser messages. * @returns {string} The validation message. */ get validationMessage(): string; /** @internal */ get formValue(): string | undefined; updated(changedProperties: Map): void; private handleChange; /** @internal */ protected updateFormValue(): void; } declare const Toggle_base: (new (...args: any[]) => InputMixinInterface) & typeof LitElement; /** * Switch control for toggling a boolean setting on or off. * @tag m-toggle * @slot default - Default content of the element (used as the label) * @attribute {boolean} checked - Whether the toggle is checked or not * @attribute {boolean} disabled - Whether the toggle is disabled * @attribute {boolean} reversed - Whether the toggle's label appears before the switch. For accessibility, it's recommended to place labels to the right of toggles (default position) as this follows the natural reading direction and makes it easier for users to scan form controls. * @attribute {boolean} labelHidden - Whether the label should be visually hidden * @attribute {string} label - The label text for the toggle * @attribute {string} value - The value associated with the toggle * @attribute {string} description - The description text for the toggle * @attribute {string} hint - The hint text for the toggle * @attribute {string} error - The error text for the toggle * @event change - Fired when the toggle state changes, with `detail.checked` indicating the new state */ declare class Toggle extends Toggle_base { label: string; description?: string; hint?: string; error?: string; checked: boolean; disabled: boolean; reversed: boolean; labelHidden: boolean; value: string; fullWidth: boolean; horizontal: boolean; required: boolean; static styles: lit.CSSResult[]; private _toggleChecked; render(): lit.TemplateResult<1>; } /** * Flexible container component for layout structure and spacing control. * @tag m-box * @slot default - Default content inside the box * @attribute {boolean} border - Whether the box has a border * @attribute {boolean} shadow - Whether the box has a shadow * @attribute {boolean} borderRadius - Whether the box has rounded corners * @attribute {string} spacing - The padding inside the box (e.g., "none", "xs", "s", "m", "l", "xl", "xxl") * @attribute {string} width - The maximum width of the box (e.g., "default", "narrow", "medium", "wide") * @attribute {string} background - The background style of the box (e.g., "default", "raised", "transparent") */ declare class Box extends LitElement { border: "transparent" | "none" | "weak"; shadow: boolean; spacing: BoxSpacing; borderRadius: boolean; width: BoxWidth; background: string; fullWidth: boolean; horizontal: boolean; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * Horizontal separator used to visually divide content sections. * @tag m-divider * @attribute {string} spacing-top - The spacing at the top of the divider (e.g., "none", "xs", "s", "m", "l", "xl", "xxl") * @attribute {string} spacing-bottom - The spacing at the bottom of the divider (e.g., "none", "xs", "s", "m", "l", "xl", "xxl") * @attribute {string} color - The color variant of the divider (e.g., "default", "weak") */ declare class Divider extends LitElement { spacingTop: DividerSpacing; spacingBottom: DividerSpacing; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * Displays a list of items paired with icons. * @tag m-icon-list * @slot default - Default slot for m-icon-list-item elements * @attribute {string} label - Accessible label for the list */ declare class IconList extends LitElement { label: string; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * IconListItem component for displaying an item with an icon * @tag m-icon-list-item * @slot default - Default slot for content * @attribute {string} icon - Name of the icon to display */ declare class IconListItem extends LitElement { icon: IconName; static styles: lit.CSSResult; connectedCallback(): void; render(): lit.TemplateResult<1>; } /** * Displays a linked item intended for use within a BoxLinkGroup. * @tag m-box-link * @slot title - Content for the title (preferably a heading element) * @slot description - Content for the description * @attribute {string} href - URL to navigate to when clicked * @attribute {string} size - Size of the box link (m or l) * @attribute {string} icon - Icon to display in the box link */ declare class BoxLink extends LitElement { href: string; icon: IconName | undefined; size: "s" | "m" | "l"; /** * @internal */ private slotDescription; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * Container component for grouping related BoxLink items. * @tag m-box-link-group * @slot default - Content inside the group, only m-box-link elements are allowed at the moment * @attribute {string} aria-label - The aria-label for the group * @attribute {string} role - The role for the group, defaults to "list" */ declare class BoxLinkGroup extends LitElement { ariaLabel: string; role: string; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * Displays label–value pairs in flexible layout variants. * @tag m-description-list * @slot - Default slot for dt/dd elements or m-description-list-item components * @attribute {boolean} labelHidden - Hide labels visually while keeping them accessible * @attribute {string} variant - Layout variant * @attribute {number} columns - Number of columns for grid/stat variants (1-6) * @attribute {boolean} bordered - Add borders for grid/stat variants * @attribute {string} spacing - Spacing variant */ declare class DescriptionList extends LitElement { /** Hide labels visually while keeping them accessible to screen readers */ labelHidden: boolean; /** Layout variant - determines how items are displayed */ variant: "vertical" | "grid" | "stat"; /** Spacing variant - determines the spacing between items */ spacing: "s" | "m"; /** Number of columns for grid/stat variants (1-6) */ columns: number; /** Add borders for grid/stat variants */ bordered: boolean; static styles: lit.CSSResult; protected updated(): void; render(): lit.TemplateResult<1>; } /** * Displays a single label–value pair within a description list. */ declare class DescriptionListItem extends LitElement { label: string; value: string; span: number; align?: "start" | "center" | "end"; nowrap: boolean; static styles: lit.CSSResult; connectedCallback(): void; private updateContextClasses; protected updated(): void; render(): lit.TemplateResult<1>; } /** * Displays ordered or unordered lists of items. * @tag m-list * @slot default - Default slot for native ul/ol elements with li children * @attribute {string} label - Accessible label for the list */ declare class List extends LitElement { label?: string; /** * Use light DOM instead of shadow DOM to preserve proper parent-child relationships * for accessibility (li elements must be direct children of ul/ol) */ protected createRenderRoot(): this; /** * Renders list styles into nearest root. * This is necessary since we do not use shadow DOM. */ private renderStyles; /** * Updates aria-label on the ul/ol element when label changes */ private updateAriaLabel; connectedCallback(): void; updated(changedProperties: Map): void; static styles: lit.CSSResult; render(): lit.TemplateResult<1>; } /** * Displays a structured list of related data items. * * @tag m-data-list * @slot default - Default slot for m-data-list-item elements */ declare class DataList extends LitElement { static styles: lit.CSSResult; connectedCallback(): void; render(): lit.TemplateResult<1>; } /** * Represents a single item within a DataList. * * @tag m-data-list-item * @slot start - Start content (e.g., avatar) * @slot title - Title text * @slot description - Description text * @slot end - End content (e.g., action buttons) * @slot footer - Footer content (e.g., banner, additional info) - takes full width and appears below other content */ declare class DataListItem extends LitElement { private startSlot; private titleSlot; private descriptionSlot; private endSlot; private footerSlot; static styles: lit.CSSResult; connectedCallback(): void; render(): lit.TemplateResult<1>; } declare global { interface Window { hbspt: any; } } /** * Form for collecting and contacting product leads. * @tag m-product-lead-form * @summary A web component that loads and displays HubSpot forms with localization support * * @property {string} id - Unique identifier for the form container * @property {string} formId - The HubSpot form ID to display * @property {string} email - Prepopulated email address * @property {string} company - Prepopulated company name * @property {string} country - Prepopulated country * @property {boolean} origin - The environment the form is loaded in * @property {string} target - The target product of the form * * @fires {CustomEvent} form-ready - Fired when the form is loaded and ready * @fires {CustomEvent} form-submit - Fired when the form is submitted * @fires {CustomEvent} form-submitted - Fired when the form submission is completed * @fires {CustomEvent} form-error - Fired if there's an error loading the form * * @example * */ declare class ProductLeadForm extends LitElement { /** * Unique identifier for the form container * @type {string} */ id: string; /** * The HubSpot form ID * @type {string} */ formId: string; /** * Prepopulated email address * @type {string} */ email: string; /** * Prepopulated company name * @type {string} */ company: string; /** * Prepopulated country * @type {string} */ country: string; /** * The environment the form is loaded in * @type {string} */ origin: string; /** * The target product of the form * @type {string} */ target: string; /** @internal */ forceLoading: boolean; /** @internal */ private loading; /** @internal */ private static readonly portalId; /** @internal */ private formContainer?; /** @internal */ submitted: boolean; /** @internal */ private _t; /** @internal */ private get containerId(); /** @internal */ private get formStyleId(); /** @internal */ private get isLoading(); private loadHubspotScript; private createFormStyles; private createForm; protected firstUpdated(): void; protected updated(changedProps: Map): void; disconnectedCallback(): void; render(): lit.TemplateResult<1>; static styles: lit.CSSResult; } /** * Dropdown menu providing user-related actions and options. * @tag m-user-menu * @slot trigger - Custom trigger element (defaults to avatar with initials) * @slot header - Custom header content to be shown at the top of the menu * @slot content - Custom content for the menu (after menu items) * @slot buttons - Custom menu buttons to replace the default items * @attribute {string} initials - User's initials to display in the avatar (max 2 characters) * @attribute {string} title - Title of the menu * @attribute {MenuItem[]} items - Array of menu items to display * @attribute {MenuPlacement} placement - The preferred placement of the menu */ declare class UserMenu extends LitElement { initials: string; title: string; items: MenuItem[]; placement: MenuPlacement; render(): lit.TemplateResult<1>; private hasSlotContent; } declare global { interface HTMLElementTagNameMap { "m-icon": Icon; "m-stack": Stack; "m-spinner": Spinner; "m-skeleton-loader": SkeletonLoader; "m-button": Button; "m-button-group": ButtonGroup; "m-tag": Tag; "m-banner": Banner; "m-form-errors": FormErrors; "m-avatar": Avatar; "m-select": Select; "m-textarea": Textarea; "m-input-text": InputText; "m-radio": Radio; "m-datepicker": DatePicker; "m-input-month": InputMonth; "m-password": Password; "m-nav": Nav; "m-nav-group": NavGroup; "m-nav-group-app": NavGroupApp; "m-dialog": Dialog; "m-details": Details; "m-promotion-dialog": PromotionDialog; "m-app-menu": AppMenu; "m-feedback-dialog": FeedbackDialog; "m-app-promotion": AppPromotion; "m-checkbox": Checkbox; "m-checkbox-group": CheckboxGroup; "m-radio-group": RadioGroup; "m-form": Form; "m-fieldset": Fieldset; "m-product-lead-form": ProductLeadForm; "m-empty-state": EmptyState; "m-icon-list": IconList; "m-icon-list-item": IconListItem; "m-toggle": Toggle; "m-popover": Popover; "m-box": Box; "m-link": Link; "m-divider": Divider; "m-table": Table; "m-menu": Menu; "m-app-header": AppHeader; "m-user-menu": UserMenu; "m-app-layout": AppLayout; "m-app-footer": AppFooter; "m-view": View; "m-horizontal": Horizontal; "m-vertical": Vertical; "m-switcher": Switcher; "m-section": Section; "m-box-link": BoxLink; "m-box-link-group": BoxLinkGroup; "m-menu-group": MenuGroup; "m-description-list": DescriptionList; "m-description-list-item": DescriptionListItem; "m-list": List; "m-data-list": DataList; "m-data-list-item": DataListItem; "m-card": Card; "m-typeset": Typeset; "m-progress-bar": ProgressBar; "m-stepper": Stepper; "m-stepper-step": StepperStep; "m-hero": Hero; } } export { AppFooter, AppHeader, AppLayout, AppMenu, type AppMenuItem, type AppMenuItems, AppPromotion, type AriaAttributes, Avatar, AvatarVariant, Banner, Box, BoxLink, BoxLinkGroup, BoxSpacing, BoxWidth, Button, ButtonGroup, ButtonGroupAlign, ButtonSize, ButtonType, ButtonVariant, Card, Checkbox, CheckboxGroup, type CheckboxItem, DataList, DataListItem, DatePicker, DefaultFeedbackDialogOptions, DescriptionList, DescriptionListItem, Details, Dialog, DialogSize, DialogVariant, Divider, DividerSpacing, EmptyState, FeedbackDialog, type FeedbackDialogOption, type FeedbackDialogOptions, Fieldset, Form, FormErrors, Hero, Horizontal, Icon, IconList, IconListItem, IconSize, InputMonth, InputText, Link, LinkSize, List, MainNav, MainNavItem, Menu, MenuGroup, type MenuItem, MenuPlacement, Nav, NavGroup, NavGroupApp, type NavGroupAppClickDetail, type NavItem, Password, Popover, PopoverPlacement, PopoverSize, ProductLeadForm, ProgressBar, PromotionDialog, Radio, RadioGroup, type RadioItem, Section, Select, SkeletonLoader, SkeletonVariant, Spinner, Stack, StackAlignment, StackDirection, StackSpacing, Stepper, StepperStep, SubNav, SubNavItem, type SupportedLanguage, Switcher, Table, Tag, TagVariant, Textarea, Toggle, type Translation, TranslationController, Typeset, UserMenu, Vertical, View };