@trimble-oss/moduswebcomponents/types/components.d.ts

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

/* eslint-disable */
/* tslint:disable */
/**
 * This is an autogenerated file created by the Stencil compiler.
 * It contains typing information for all components that exist in this project.
 */
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
import { AutocompleteTypes, DaisySize, Density, IAutocompleteItem, IAutocompleteNoResults, IInputFeedbackProp, ModusSize, Orientation, PopoverPlacement, TextFieldTypes } from "./components/types";
import { IBreadcrumb } from "./components/modus-wc-breadcrumbs/modus-wc-breadcrumbs";
import { ICollapseOptions } from "./components/modus-wc-collapse/modus-wc-collapse";
import { IInputFeedbackLevel } from "./components/modus-wc-input-feedback/modus-wc-input-feedback";
import { LoaderColor, LoaderVariant } from "./components/modus-wc-loader/modus-wc-loader";
import { INavbarTextOverrides, INavbarUserCard, INavbarVisibility } from "./components/modus-wc-navbar/modus-wc-navbar";
import { IAriaLabelValues, IPageChange } from "./components/modus-wc-pagination/modus-wc-pagination";
import { IRatingChange, ModusWcRatingVariant } from "./components/modus-wc-rating/modus-wc-rating";
import { ISelectOption } from "./components/modus-wc-select/modus-wc-select";
import { IStepperItem } from "./components/modus-wc-stepper/modus-wc-stepper";
import { IPaginationChangeEventDetail, ITableColumn } from "./components/modus-wc-table/modus-wc-table";
import { SortingState } from "@tanstack/table-core";
import { ITab } from "./components/modus-wc-tabs/modus-wc-tabs";
import { IThemeConfig } from "./providers/theme/theme.types";
import { ToastPosition } from "./components/modus-wc-toast/modus-wc-toast";
import { TypographySize, TypographyVariant, TypographyWeight } from "./components/modus-wc-typography/modus-wc-typography";
export { AutocompleteTypes, DaisySize, Density, IAutocompleteItem, IAutocompleteNoResults, IInputFeedbackProp, ModusSize, Orientation, PopoverPlacement, TextFieldTypes } from "./components/types";
export { IBreadcrumb } from "./components/modus-wc-breadcrumbs/modus-wc-breadcrumbs";
export { ICollapseOptions } from "./components/modus-wc-collapse/modus-wc-collapse";
export { IInputFeedbackLevel } from "./components/modus-wc-input-feedback/modus-wc-input-feedback";
export { LoaderColor, LoaderVariant } from "./components/modus-wc-loader/modus-wc-loader";
export { INavbarTextOverrides, INavbarUserCard, INavbarVisibility } from "./components/modus-wc-navbar/modus-wc-navbar";
export { IAriaLabelValues, IPageChange } from "./components/modus-wc-pagination/modus-wc-pagination";
export { IRatingChange, ModusWcRatingVariant } from "./components/modus-wc-rating/modus-wc-rating";
export { ISelectOption } from "./components/modus-wc-select/modus-wc-select";
export { IStepperItem } from "./components/modus-wc-stepper/modus-wc-stepper";
export { IPaginationChangeEventDetail, ITableColumn } from "./components/modus-wc-table/modus-wc-table";
export { SortingState } from "@tanstack/table-core";
export { ITab } from "./components/modus-wc-tabs/modus-wc-tabs";
export { IThemeConfig } from "./providers/theme/theme.types";
export { ToastPosition } from "./components/modus-wc-toast/modus-wc-toast";
export { TypographySize, TypographyVariant, TypographyWeight } from "./components/modus-wc-typography/modus-wc-typography";
export namespace Components {
    /**
     * A customizable accordion component used for showing and hiding related groups of content.
     * The component supports a `<slot>` for injecting `<modus-wc-collapse>` elements. See [Collapse](/docs/components-collapse--docs) docs for additional info.
     */
    interface ModusWcAccordion {
        /**
          * Custom CSS class to apply to the inner div.
         */
        "customClass"?: string;
    }
    /**
     * A customizable alert component used to inform the user about important events
     */
    interface ModusWcAlert {
        /**
          * The description of the alert.
         */
        "alertDescription"?: string;
        /**
          * The title of the alert.
         */
        "alertTitle": string;
        /**
          * Custom CSS class to apply to the outer div element.
         */
        "customClass"?: string;
        /**
          * Time taken to dismiss the alert in milliseconds
         */
        "delay"?: number;
        /**
          * Whether the alert has a dismiss button
         */
        "dismissible"?: boolean;
        /**
          * The Modus icon to render.
         */
        "icon"?: string;
        /**
          * Role taken by the alert. Defaults to 'status'
         */
        "role": 'alert' | 'log' | 'marquee' | 'status' | 'timer';
        /**
          * The variant of the alert.
         */
        "variant"?: 'error' | 'info' | 'success' | 'warning';
    }
    /**
     * A customizable autocomplete component used to create searchable text inputs.
     */
    interface ModusWcAutocomplete {
        /**
          * Indicates that the autocomplete should have a border.
         */
        "bordered"?: boolean;
        /**
          * Clear the input value and reset items
         */
        "clearInput": () => Promise<void>;
        /**
          * Programmatically close the menu
         */
        "closeMenu": () => Promise<void>;
        /**
          * Custom blur handler - if provided, overrides default blur behavior
         */
        "customBlur"?: (event: FocusEvent) => void;
        /**
          * Custom CSS class to apply to host element.
         */
        "customClass"?: string;
        /**
          * Custom input change handler - if provided, overrides default search filtering
         */
        "customInputChange"?: (value: string) => void;
        /**
          * Custom item selection handler - if provided, overrides default selection logic
         */
        "customItemSelect"?: (item: IAutocompleteItem) => void;
        /**
          * Custom key down handler - if provided, overrides default keyboard navigation
         */
        "customKeyDown"?: (event: KeyboardEvent) => void;
        /**
          * The debounce timeout in milliseconds. Set to 0 to disable debouncing.
         */
        "debounceMs"?: number;
        /**
          * Whether the form control is disabled.
         */
        "disabled"?: boolean;
        /**
          * Programmatically set focus to input
         */
        "focusInput": () => Promise<void>;
        /**
          * Show the clear button within the input field.
         */
        "includeClear"?: boolean;
        /**
          * Show the search icon within the input field.
         */
        "includeSearch"?: boolean;
        /**
          * The ID of the input element.
         */
        "inputId"?: string;
        /**
          * Determine the control's relative ordering for sequential focus navigation (typically with the Tab key).
         */
        "inputTabIndex"?: number;
        /**
          * The items to display in the menu. Creating a new array of items will ensure proper component re-render.
         */
        "items"?: IAutocompleteItem[];
        /**
          * The text to display within the label.
         */
        "label"?: string;
        /**
          * Whether the menu should remain open after an item is selected.
         */
        "leaveMenuOpen"?: boolean;
        /**
          * Maximum number of chips to display. When exceeded, shows expand/collapse button. Set to -1 to disable limit.
         */
        "maxChips"?: number;
        /**
          * The minimum number of characters required to render the menu.
         */
        "minChars": number;
        /**
          * Minimum width for the text input in pixels. When chips would make input smaller, container height increases instead.
         */
        "minInputWidth"?: number;
        /**
          * Whether the input allows multiple items to be selected.
         */
        "multiSelect"?: boolean;
        /**
          * Name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * The content to display when no results are found.
         */
        "noResults"?: IAutocompleteNoResults;
        /**
          * Programmatically open the menu
         */
        "openMenu": () => Promise<void>;
        /**
          * Text that appears in the form control when it has no value set.
         */
        "placeholder"?: string;
        /**
          * Whether the value is editable.
         */
        "readOnly"?: boolean;
        /**
          * A value is required for the form to be submittable.
         */
        "required"?: boolean;
        /**
          * Programmatically select an item
         */
        "selectItem": (item: IAutocompleteItem | null) => Promise<void>;
        /**
          * Whether to show the menu whenever the input has focus, regardless of input value.
         */
        "showMenuOnFocus"?: boolean;
        /**
          * A spinner that appears when set to true
         */
        "showSpinner"?: boolean;
        /**
          * The size of the autocomplete (input and menu).
         */
        "size"?: ModusSize;
        /**
          * Programmatically toggle the menu open/closed
         */
        "toggleMenu": () => Promise<void>;
        /**
          * The value of the control.
         */
        "value": string;
    }
    /**
     * A customizable avatar component used to create avatars with different images.
     */
    interface ModusWcAvatar {
        /**
          * The image alt attribute for accessibility.
         */
        "alt": string;
        /**
          * Custom CSS class to apply to the inner div.
         */
        "customClass"?: string;
        /**
          * The location of the image.
         */
        "imgSrc": string;
        /**
          * The shape of the avatar.
         */
        "shape"?: 'circle' | 'square';
        /**
          * The size of the avatar.
         */
        "size"?: DaisySize;
    }
    /**
     * A customizable badge component used to create badges with different sizes, types, and colors.
     * The component supports a `<slot>` for injecting content within the badge.
     */
    interface ModusWcBadge {
        /**
          * The color variant of the badge.
         */
        "color": | 'primary'
    | 'secondary'
    | 'tertiary'
    | 'high-contrast'
    | 'success'
    | 'warning'
    | 'danger';
        /**
          * Custom CSS class to apply to the span element.
         */
        "customClass": string;
        /**
          * The size of the badge.
         */
        "size": ModusSize;
        /**
          * The variant of the badge.
         */
        "variant": 'counter' | 'filled' | 'outlined' | 'text';
    }
    /**
     * A customizable breadcrumbs component used to help users navigate through a website.
     */
    interface ModusWcBreadcrumbs {
        /**
          * Custom CSS class to apply to the inner div.
         */
        "customClass"?: string;
        /**
          * The breadcrumbs to render.
         */
        "items": IBreadcrumb[];
        /**
          * The size of the breadcrumbs.
         */
        "size"?: ModusSize;
    }
    /**
     * A customizable button component used to create buttons with different sizes, variants, and types.
     * The component supports a `<slot>` for injecting content within the button, similar to a native HTML button
     */
    interface ModusWcButton {
        /**
          * The color variant of the button.
         */
        "color": 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
        /**
          * Custom CSS class to apply to the button element.
         */
        "customClass"?: string;
        /**
          * If true, the button will be disabled.
         */
        "disabled"?: boolean;
        /**
          * If true, the button will take the full width of its container.
         */
        "fullWidth"?: boolean;
        /**
          * If true, the button will be in a pressed state (for toggle buttons).
         */
        "pressed"?: boolean;
        /**
          * The shape of the button.
         */
        "shape": 'circle' | 'rectangle' | 'square';
        /**
          * The size of the button.
         */
        "size": DaisySize;
        /**
          * The type of the button.
         */
        "type": 'button' | 'submit' | 'reset';
        /**
          * The variant of the button.
         */
        "variant": 'borderless' | 'filled' | 'outlined';
    }
    /**
     * A customizable card component used to group and display content in a way that is easily readable
     */
    interface ModusWcCard {
        /**
          * Makes any \<figure> in the 'header' slot cover the background
         */
        "backgroundFigure"?: boolean;
        /**
          * Adds a hard border to the card
         */
        "bordered"?: boolean;
        /**
          * Custom CSS class to apply
         */
        "customClass"?: string;
        /**
          * Determines how the card is laid out
         */
        "layout"?: 'vertical' | 'horizontal';
        /**
          * Determines if the interior padding is compact or not
         */
        "padding"?: 'normal' | 'compact';
    }
    /**
     * A customizable checkbox component
     */
    interface ModusWcCheckbox {
        /**
          * Custom CSS class to apply to the inner div.
         */
        "customClass"?: string;
        /**
          * The disabled state of the checkbox.
         */
        "disabled"?: boolean;
        /**
          * The indeterminate state of the checkbox.
         */
        "indeterminate": boolean;
        /**
          * The ID of the input element.
         */
        "inputId"?: string;
        /**
          * The tabindex of the input.
         */
        "inputTabIndex"?: number;
        /**
          * The text to display within the label.
         */
        "label"?: string;
        /**
          * Name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * A value is required for the form to be submittable.
         */
        "required"?: boolean;
        /**
          * The size of the input.
         */
        "size"?: ModusSize;
        /**
          * The value of the checkbox.
         */
        "value": boolean;
    }
    /**
     * A customizable chip component used to display information in a compact area
     */
    interface ModusWcChip {
        /**
          * Active state of chip.
         */
        "active"?: boolean;
        /**
          * Custom CSS class to apply to the inner div.
         */
        "customClass"?: string;
        /**
          * Whether the chip is disabled.
         */
        "disabled"?: boolean;
        /**
          * Whether the chip has an error.
         */
        "hasError"?: boolean;
        /**
          * The label to display in the chip.
         */
        "label"?: string;
        /**
          * Whether to show the close icon on right side of the chip.
         */
        "showRemove"?: boolean;
        /**
          * The size of the chip.
         */
        "size"?: ModusSize;
        /**
          * The variant of the chip.
         */
        "variant"?: 'filled' | 'outline';
    }
    /**
     * A customizable collapse component used for showing and hiding content.
     * The component supports a 'header' and 'content' `<slot>` for injecting custom HTML.
     * Do not set
     */
    interface ModusWcCollapse {
        /**
          * Indicates that the component should have a border.
         */
        "bordered"?: boolean;
        /**
          * A unique identifier used to set the id attributes of various elements.
         */
        "collapseId"?: string;
        /**
          * Custom CSS class to apply to the outer div.
         */
        "customClass"?: string;
        /**
          * Controls whether the collapse is expanded or not.
         */
        "expanded"?: boolean;
        /**
          * Configuration options for rendering the pre-laid out collapse component. Do not set this prop if you intend to use the 'header' slot.
         */
        "options"?: ICollapseOptions;
    }
    /**
     * A customizable date picker component used to create date inputs.
     * Adheres to WCAG 2.2 standards.
     */
    interface ModusWcDate {
        /**
          * Indicates that the input should have a border.
         */
        "bordered"?: boolean;
        /**
          * Custom CSS class to apply to the input.
         */
        "customClass"?: string;
        /**
          * Whether the form control is disabled.
         */
        "disabled"?: boolean;
        /**
          * Feedback to render below the input.
         */
        "feedback"?: IInputFeedbackProp;
        /**
          * The ID of the input element.
         */
        "inputId"?: string;
        /**
          * Determine the control's relative ordering for sequential focus navigation (typically with the Tab key).
         */
        "inputTabIndex"?: number;
        /**
          * The text to display within the label.
         */
        "label"?: string;
        /**
          * Maximum date value.
         */
        "max"?: string;
        /**
          * Minimum date value.
         */
        "min"?: string;
        /**
          * Name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * Whether the value is editable.
         */
        "readOnly"?: boolean;
        /**
          * A value is required or must be checked for the form to be submittable.
         */
        "required"?: boolean;
        /**
          * The size of the input.
         */
        "size"?: ModusSize;
        /**
          * The value of the control (yyyy-mm-dd).
         */
        "value": string;
    }
    /**
     * A customizable divider component used to separate content horizontally or vertically
     */
    interface ModusWcDivider {
        /**
          * The color of the divider line.
         */
        "color"?: | 'primary'
    | 'secondary'
    | 'tertiary'
    | 'high-contrast'
    | 'success'
    | 'warning'
    | 'danger';
        /**
          * The content to display in the divider.
         */
        "content"?: string;
        /**
          * Custom CSS class to apply to the divider element.
         */
        "customClass"?: string;
        /**
          * The orientation of the divider. This is in reference to how content will be rendered around the divider.
         */
        "orientation"?: Orientation;
        /**
          * The position of the divider.
         */
        "position"?: 'center' | 'end' | 'start';
        /**
          * Whether the divider is responsive or not.
         */
        "responsive"?: boolean;
    }
    /**
     * A customizable dropdown menu component used to render a button and toggleable menu.
     * The component supports a 'button' and 'menu' `<slot>` for injecting custom HTML content.
     */
    interface ModusWcDropdownMenu {
        /**
          * The aria-label for the dropdown button.
         */
        "buttonAriaLabel"?: string;
        /**
          * The color variant of the button.
         */
        "buttonColor"?: | 'primary'
    | 'secondary'
    | 'tertiary'
    | 'warning'
    | 'danger';
        /**
          * The size of the button.
         */
        "buttonSize"?: DaisySize;
        /**
          * The variant of the button.
         */
        "buttonVariant"?: 'borderless' | 'filled' | 'outlined';
        /**
          * Custom CSS class to apply to the host element.
         */
        "customClass"?: string;
        /**
          * If true, the button will be disabled.
         */
        "disabled"?: boolean;
        /**
          * Indicates that the menu should have a border.
         */
        "menuBordered"?: boolean;
        /**
          * Distance between the button and menu in pixels.
         */
        "menuOffset"?: number;
        /**
          * The placement of the menu relative to the button.
         */
        "menuPlacement"?: PopoverPlacement;
        /**
          * The size of the menu.
         */
        "menuSize"?: ModusSize;
        /**
          * Indicates that the menu is visible.
         */
        "menuVisible": boolean;
    }
    /**
     * A customizable icon component used to render Modus icons.
     * <b>This component requires Modus icons to be installed in the host application. See [Modus Icon Usage](/docs/documentation-modus-icon-usage--docs) for steps.</b>
     */
    interface ModusWcIcon {
        /**
          * Custom CSS class to apply to the i element.
         */
        "customClass"?: string;
        /**
          * Indicates that the icon is decorative. When true, sets aria-hidden to hide the icon from screen readers.
         */
        "decorative"?: boolean;
        /**
          * The icon name, should match the CSS class in the icon font.
         */
        "name": string;
        /**
          * The icon size, can be "sm", "md", "lg" (a custom size can be specified in CSS). This adjusts the font size for the icon.
         */
        "size"?: DaisySize;
    }
    /**
     * A customizable feedback component used to provide additional context related to form input interactions.
     * <b>To use a custom icon, this component requires Modus icons to be installed in the host application. See [Modus Icon Usage](/docs/documentation-modus-icon-usage--docs) for steps.</b>
     */
    interface ModusWcInputFeedback {
        /**
          * Custom CSS class to apply to the outer div element.
         */
        "customClass"?: string;
        /**
          * The Modus icon to use instead of the pre-defined icons.
         */
        "icon"?: string;
        /**
          * The level informs which icon and color that will be rendered.
         */
        "level": IInputFeedbackLevel;
        /**
          * The message.
         */
        "message"?: string;
        /**
          * The size of the feedback component.
         */
        "size"?: ModusSize;
    }
    /**
     * A customizable input label component.
     * The component supports a `<slot>` for injecting additional custom content inside the label, such as icons or formatted text
     */
    interface ModusWcInputLabel {
        /**
          * Additional classes for custom styling.
         */
        "customClass"?: string;
        /**
          * The `for` attribute of the label, matching the `id` of the associated input.
         */
        "forId"?: string;
        /**
          * The text to display within the label.
         */
        "labelText"?: string;
        /**
          * Whether the label indicates a required field.
         */
        "required"?: boolean;
        /**
          * The size of the label.
         */
        "size"?: ModusSize;
        /**
          * The text rendered beneath the label.
         */
        "subLabelText"?: string;
    }
    /**
     * A customizable loader component used to indicate the loading of content
     */
    interface ModusWcLoader {
        /**
          * The color of the loader.
         */
        "color": LoaderColor;
        /**
          * Custom CSS class to apply to the loader element.
         */
        "customClass"?: string;
        /**
          * The size of the loader.
         */
        "size": DaisySize;
        /**
          * The variant of the loader.
         */
        "variant": LoaderVariant;
    }
    /**
     * A customizable menu component used to display a list of li elements vertically or horizontally.
     * The component supports a `<slot>` for injecting custom li elements inside the ul
     */
    interface ModusWcMenu {
        /**
          * Indicates that the menu should have a border.
         */
        "bordered"?: boolean;
        /**
          * Custom CSS class to apply to the ul element.
         */
        "customClass"?: string;
        /**
          * The orientation of the menu.
         */
        "orientation"?: Orientation;
        /**
          * The size of the menu.
         */
        "size"?: ModusSize;
    }
    /**
     * A customizable menu item component used to display the item portion of a menu
     */
    interface ModusWcMenuItem {
        "bordered"?: boolean;
        /**
          * Custom CSS class to apply to the li element.
         */
        "customClass"?: string;
        /**
          * The disabled state of the menu item.
         */
        "disabled"?: boolean;
        /**
          * The focused state of the menu item.
         */
        "focused"?: boolean;
        /**
          * The text rendered in the menu item.
         */
        "label": string;
        /**
          * The selected state of the menu item.
         */
        "selected"?: boolean;
        /**
          * The size of the menu item.
         */
        "size"?: ModusSize;
        /**
          * The modus icon name to render on the start of the menu item.
         */
        "startIcon"?: string;
        /**
          * The text rendered beneath the label.
         */
        "subLabel"?: string;
        /**
          * The unique identifying value of the menu item.
         */
        "value": string;
    }
    /**
     * A customizable modal component used to display content in a dialog.
     * The component supports a 'header', 'content', and 'footer' <slot> for injecting custom HTML
     */
    interface ModusWcModal {
        /**
          * The modal's backdrop. Specify 'static' for a backdrop that doesn't close the modal when clicked outside the modal content.
         */
        "backdrop"?: 'default' | 'static';
        /**
          * Custom CSS class to apply
         */
        "customClass"?: string;
        /**
          * Specifies whether the modal should be displayed full-screen
         */
        "fullscreen"?: boolean;
        /**
          * The ID of the inner dialog element
         */
        "modalId": string;
        /**
          * Specifies the position of the modal
         */
        "position"?: 'bottom' | 'center' | 'top';
        /**
          * Specifies whether to show the close icon button at the top right of modal
         */
        "showClose"?: boolean;
        /**
          * Specifies whether to show the fullscreen toggle icon button
         */
        "showFullscreenToggle"?: boolean;
    }
    /**
     * A customizable navbar component used for top level navigation of all Trimble applications.
     * The component supports a 'main-menu', 'notifications', and 'apps' `<slot>` for injecting custom HTML menus.
     * It also supports a 'start', 'center', and 'end' `<slot>` for injecting additional custom HTML
     */
    interface ModusWcNavbar {
        /**
          * The open state of the apps menu.
         */
        "appsMenuOpen"?: boolean;
        /**
          * Applies condensed layout and styling.
         */
        "condensed"?: boolean;
        /**
          * The open state of the condensed menu.
         */
        "condensedMenuOpen"?: boolean;
        /**
          * Custom CSS class to apply to the host element.
         */
        "customClass"?: string;
        /**
          * The open state of the main menu.
         */
        "mainMenuOpen"?: boolean;
        /**
          * The open state of the notifications menu.
         */
        "notificationsMenuOpen"?: boolean;
        /**
          * Debounce time in milliseconds for search input changes. Default is 300ms.
         */
        "searchDebounceMs"?: number;
        /**
          * The open state of the search input.
         */
        "searchInputOpen"?: boolean;
        /**
          * Text replacements for the navbar.
         */
        "textOverrides"?: INavbarTextOverrides;
        /**
          * User information used to render the user card.
         */
        "userCard": INavbarUserCard;
        /**
          * The open state of the user menu.
         */
        "userMenuOpen"?: boolean;
        /**
          * The visibility of individual navbar buttons. Default is user profile visible, others hidden.
         */
        "visibility"?: INavbarVisibility;
    }
    /**
     * A customizable input component used to create number inputs with types
     */
    interface ModusWcNumberInput {
        /**
          * Hint for form autofill feature.
         */
        "autoComplete"?: 'on' | 'off';
        /**
          * Indicates that the input should have a border.
         */
        "bordered"?: boolean;
        /**
          * The currency symbol to display.
         */
        "currencySymbol"?: string;
        /**
          * Custom CSS class to apply to the input.
         */
        "customClass"?: string;
        /**
          * Whether the form control is disabled.
         */
        "disabled"?: boolean;
        /**
          * Feedback to render below the input.
         */
        "feedback"?: IInputFeedbackProp;
        /**
          * The ID of the input element.
         */
        "inputId"?: string;
        /**
          * Hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.
         */
        "inputMode": 'decimal' | 'none' | 'numeric';
        /**
          * Determine the control's relative ordering for sequential focus navigation (typically with the Tab key).
         */
        "inputTabIndex"?: number;
        /**
          * The text to display within the label.
         */
        "label"?: string;
        /**
          * The input's maximum value.
         */
        "max"?: number;
        /**
          * The input's minimum value.
         */
        "min"?: number;
        /**
          * Name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * Text that appears in the form control when it has no value set.
         */
        "placeholder"?: string;
        /**
          * Whether the value is editable.
         */
        "readOnly"?: boolean;
        /**
          * A value is required for the form to be submittable.
         */
        "required"?: boolean;
        /**
          * The size of the input.
         */
        "size"?: ModusSize;
        /**
          * The granularity that the value adheres to.
         */
        "step"?: number;
        /**
          * Type of form control.
         */
        "type"?: 'number' | 'range';
        /**
          * The value of the control.
         */
        "value": string;
    }
    /**
     * Pagination component to navigate through pages of content
     */
    interface ModusWcPagination {
        /**
          * Aria label values for pagination buttons
         */
        "ariaLabelValues"?: IAriaLabelValues;
        /**
          * Total number of pages
         */
        "count": number;
        /**
          * Custom CSS class to apply
         */
        "customClass"?: string;
        /**
          * The next page button text. If not set, an icon control will be used.
         */
        "nextButtonText"?: string;
        /**
          * The current page number
         */
        "page": number;
        /**
          * The previous page button text. If not set, an icon control will be used.
         */
        "prevButtonText"?: string;
        /**
          * Size of the pagination buttons
         */
        "size": ModusSize;
    }
    /**
     * A customizable progress component used to show the progress of a task or show the passing of time.
     * The radial variant supports slotting in custom HTML to be displayed within the progress circle
     */
    interface ModusWcProgress {
        /**
          * Custom CSS class to apply to the progress element.
         */
        "customClass"?: string;
        /**
          * The indeterminate state of the progress component.
         */
        "indeterminate": boolean;
        /**
          * A text label to render within the progress bar
         */
        "label"?: string;
        /**
          * The progress component's maximum value.
         */
        "max"?: number;
        /**
          * The value of the progress component.
         */
        "value": number;
        /**
          * The variant of the progress component.
         */
        "variant"?: 'default' | 'radial';
    }
    /**
     * A customizable radio component
     */
    interface ModusWcRadio {
        /**
          * Custom CSS class to apply to the inner div.
         */
        "customClass"?: string;
        /**
          * The disabled state of the radio.
         */
        "disabled"?: boolean;
        /**
          * The ID of the input element.
         */
        "inputId"?: string;
        /**
          * The tabindex of the input.
         */
        "inputTabIndex"?: number;
        /**
          * The text to display within the label.
         */
        "label"?: string;
        /**
          * Name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * A value is required for the form to be submittable.
         */
        "required"?: boolean;
        /**
          * The size of the input.
         */
        "size"?: ModusSize;
        /**
          * The value of the radio.
         */
        "value": boolean;
    }
    /**
     * A rating component that allows users to choose a rating from predefined options
     */
    interface ModusWcRating {
        /**
          * Whether to allow half-ratings. Only applies to star and heart variants.
         */
        "allowHalf"?: boolean;
        /**
          * The number of rating items to display
         */
        "count": number;
        /**
          * Custom CSS class to apply
         */
        "customClass"?: string;
        /**
          * Whether the rating component is disabled
         */
        "disabled"?: boolean;
        /**
          * Function to provide aria-label text for a given rating-item index
         */
        "getAriaLabelText"?: (ratingValue: number) => string;
        /**
          * The size of the rating component
         */
        "size"?: ModusSize;
        /**
          * The current value of the rating
         */
        "value": number;
        /**
          * The variant of the rating scale
         */
        "variant": ModusWcRatingVariant;
    }
    /**
     * A customizable select component used to pick a value from a list of options
     */
    interface ModusWcSelect {
        /**
          * Indicates that the input should have a border.
         */
        "bordered"?: boolean;
        /**
          * Custom CSS class to apply to the inner div.
         */
        "customClass"?: string;
        /**
          * Whether the form control is disabled.
         */
        "disabled"?: boolean;
        /**
          * Feedback to render below the input.
         */
        "feedback"?: IInputFeedbackProp;
        /**
          * The ID of the input element.
         */
        "inputId"?: string;
        /**
          * Determine the control's relative ordering for sequential focus navigation (typically with the Tab key).
         */
        "inputTabIndex"?: number;
        /**
          * The text to display within the label.
         */
        "label"?: string;
        /**
          * Name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * The options to display in the select dropdown.
         */
        "options": ISelectOption[];
        /**
          * A value is required for the form to be submittable.
         */
        "required"?: boolean;
        /**
          * The size of the input.
         */
        "size"?: ModusSize;
        /**
          * The value of the control.
         */
        "value": string;
    }
    /**
     * A customizable side navigation component for organizing primary navigation and content areas in an application.
     */
    interface ModusWcSideNavigation {
        /**
          * Whether the side navigation should collapse when clicking outside of it.
         */
        "collapseOnClickOutside": boolean;
        /**
          * Custom CSS class to apply to the inner div.
         */
        "customClass"?: string;
        /**
          * Whether the side navigation is expanded.
         */
        "expanded": boolean;
        /**
          * Maximum width of the side navigation panel in an expanded state.
         */
        "maxWidth": string;
        /**
          * Mode to make side navigation either overlay or push the content for the selector specified in targetContent
         */
        "mode": 'overlay' | 'push';
        /**
          * (optional) Specify the selector for the page's content for which paddings and margins will be set by side navigation based on the mode.
         */
        "targetContent": string;
    }
    /**
     * A customizable skeleton component used to create skeletons of various sizes and shapes
     */
    interface ModusWcSkeleton {
        /**
          * Custom CSS class to apply to the inner div.
         */
        "customClass"?: string;
        /**
          * The height of the skeleton.
         */
        "height": string;
        /**
          * The shape of the skeleton.
         */
        "shape"?: 'circle' | 'rectangle';
        /**
          * The width of the skeleton.
         */
        "width": string;
    }
    /**
     * A customizable slider component
     */
    interface ModusWcSlider {
        /**
          * Custom CSS class to apply to the inner div.
         */
        "customClass"?: string;
        /**
          * The disabled state of the slider.
         */
        "disabled"?: boolean;
        /**
          * The ID of the input element.
         */
        "inputId"?: string;
        /**
          * The tabindex of the input.
         */
        "inputTabIndex"?: number;
        /**
          * The text to display within the label.
         */
        "label"?: string;
        /**
          * The maximum slider value.
         */
        "max"?: number;
        /**
          * The minimum slider value.
         */
        "min"?: number;
        /**
          * Name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * A value is required for the form to be submittable.
         */
        "required"?: boolean;
        /**
          * The size of the input.
         */
        "size"?: ModusSize;
        /**
          * The increment of the slider.
         */
        "step"?: number;
        /**
          * The value of the slider.
         */
        "value": number;
    }
    /**
     * Used to show a list of steps in a process.
     */
    interface ModusWcStepper {
        /**
          * Custom CSS class to apply to the steps element.
         */
        "customClass"?: string;
        /**
          * The orientation of the steps.
         */
        "orientation"?: Orientation;
        /**
          * The steps to display.
         */
        "steps": IStepperItem[];
    }
    /**
     * A customizable checkbox component
     */
    interface ModusWcSwitch {
        /**
          * Custom CSS class to apply to the inner div.
         */
        "customClass"?: string;
        /**
          * The disabled state of the switch.
         */
        "disabled"?: boolean;
        /**
          * The indeterminate state of the switch.
         */
        "indeterminate": boolean;
        /**
          * The ID of the input element.
         */
        "inputId"?: string;
        /**
          * The tabindex of the input.
         */
        "inputTabIndex"?: number;
        /**
          * The text to display within the label.
         */
        "label"?: string;
        /**
          * Name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * A value is required for the form to be submittable.
         */
        "required"?: boolean;
        /**
          * The size of the input.
         */
        "size"?: ModusSize;
        /**
          * The value of the switch.
         */
        "value": boolean;
    }
    interface ModusWcTable {
        /**
          * An array of column definitions.
         */
        "columns": ITableColumn[];
        /**
          * The current page number in pagination (1-based index).
         */
        "currentPage": number;
        /**
          * Custom CSS class to apply to the inner div.
         */
        "customClass"?: string;
        /**
          * An array of data objects.
         */
        "data": Record<string, unknown>[];
        /**
          * The density of the table, used to save space or increase readability.
         */
        "density"?: Density;
        /**
          * Enable cell editing. Either a boolean (all rows) or a predicate per row.
         */
        "editable"?: boolean | ((row: Record<string, unknown>) => boolean);
        /**
          * Enable hover effect on table rows.
         */
        "hover"?: boolean;
        /**
          * Available options for the number of rows per page.
         */
        "pageSizeOptions": number[];
        /**
          * Enable pagination for the table.
         */
        "paginated"?: boolean;
        /**
          * Row selection mode: 'none' for no selection, 'single' for single row, 'multi' for multiple rows.
         */
        "selectable"?: 'none' | 'single' | 'multi';
        /**
          * Array of selected row IDs. Used for controlled selection state.
         */
        "selectedRowIds"?: string[];
        /**
          * Show/hide the page size selector in pagination.
         */
        "showPageSizeSelector"?: boolean;
        /**
          * Enable sorting functionality for sortable columns.
         */
        "sortable"?: boolean;
        /**
          * Zebra striped tables differentiate rows by styling them in an alternating fashion.
         */
        "zebra"?: boolean;
    }
    /**
     * A customizable tabs component used to create groups of tabs.
     */
    interface ModusWcTabs {
        /**
          * The current active tab
         */
        "activeTabIndex": number;
        /**
          * Custom CSS class to apply to the inner div.
         */
        "customClass"?: string;
        /**
          * The size of the tabs.
         */
        "size"?: ModusSize;
        /**
          * Additional styling for the tabs.
         */
        "tabStyle"?: 'boxed' | 'bordered' | 'lifted' | 'none';
        /**
          * The tabs to display.
         */
        "tabs": ITab[];
    }
    /**
     * A customizable input component used to create text inputs with types.
     */
    interface ModusWcTextInput {
        /**
          * Controls automatic capitalization in inputted text.
         */
        "autoCapitalize"?: | 'off'
    | 'none'
    | 'on'
    | 'sentences'
    | 'words'
    | 'characters';
        /**
          * Hint for form autofill feature.
         */
        "autoComplete"?: AutocompleteTypes;
        /**
          * Controls automatic correction in inputted text. Support by browser varies.
         */
        "autoCorrect"?: 'on' | 'off';
        /**
          * Indicates that the input should have a border.
         */
        "bordered"?: boolean;
        /**
          * Aria label for the clear icon button.
         */
        "clearAriaLabel"?: string;
        /**
          * Custom CSS class to apply to the input.
         */
        "customClass"?: string;
        /**
          * Whether the form control is disabled.
         */
        "disabled"?: boolean;
        /**
          * A hint to the browser for which enter key to display.
         */
        "enterkeyhint"?: | 'enter'
    | 'done'
    | 'go'
    | 'next'
    | 'previous'
    | 'search'
    | 'send';
        /**
          * Feedback to render below the input.
         */
        "feedback"?: IInputFeedbackProp;
        /**
          * Show the clear button within the input field.
         */
        "includeClear"?: boolean;
        /**
          * Show the search icon within the input field.
         */
        "includeSearch"?: boolean;
        /**
          * The ID of the input element.
         */
        "inputId"?: string;
        /**
          * Hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.
         */
        "inputMode": | 'decimal'
    | 'email'
    | 'none'
    | 'numeric'
    | 'search'
    | 'tel'
    | 'text'
    | 'url';
        /**
          * Determine the control's relative ordering for sequential focus navigation (typically with the Tab key).
         */
        "inputTabIndex"?: number;
        /**
          * The text to display within the label.
         */
        "label"?: string;
        /**
          * Maximum length (number of characters) of value.
         */
        "maxLength"?: number;
        /**
          * Minimum length (number of characters) of value.
         */
        "minLength"?: number;
        /**
          * Name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * Pattern the value must match to be valid
         */
        "pattern"?: string;
        /**
          * Text that appears in the form control when it has no value set.
         */
        "placeholder"?: string;
        /**
          * Whether the value is editable.
         */
        "readOnly"?: boolean;
        /**
          * A value is required for the form to be submittable.
         */
        "required"?: boolean;
        /**
          * The size of the input.
         */
        "size"?: ModusSize;
        /**
          * Type of form control.
         */
        "type"?: TextFieldTypes;
        /**
          * The value of the control.
         */
        "value": string;
    }
    /**
     * A customizable textarea component.
     */
    interface ModusWcTextarea {
        /**
          * Controls automatic correction in inputted text. Support by browser varies.
         */
        "autoCorrect"?: 'on' | 'off';
        /**
          * Indicates that the input should have a border.
         */
        "bordered"?: boolean;
        /**
          * Custom CSS class to apply to the textarea (supports DaisyUI).
         */
        "customClass"?: string;
        /**
          * The disabled state of the textarea.
         */
        "disabled"?: boolean;
        /**
          * A hint to the browser for which enter key to display.
         */
        "enterkeyhint"?: | 'enter'
    | 'done'
    | 'go'
    | 'next'
    | 'previous'
    | 'search'
    | 'send';
        /**
          * Feedback to render below the input.
         */
        "feedback"?: IInputFeedbackProp;
        /**
          * The ID of the input element.
         */
        "inputId"?: string;
        /**
          * The tabindex of the input.
         */
        "inputTabIndex"?: number;
        /**
          * The text to display within the label.
         */
        "label"?: string;
        /**
          * The maximum number of characters allowed in the textarea.
         */
        "maxLength"?: number;
        /**
          * Name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * The placeholder text for the textarea.
         */
        "placeholder"?: string;
        /**
          * The readonly state of the textarea.
         */
        "readonly"?: boolean;
        /**
          * A value is required for the form to be submittable.
         */
        "required"?: boolean;
        /**
          * The number of visible text lines for the textarea.
         */
        "rows"?: number;
        /**
          * The size of the input.
         */
        "size"?: ModusSize;
        /**
          * The value of the textarea.
         */
        "value": string;
    }
    interface ModusWcThemeProvider {
        "initialTheme"?: Partial<IThemeConfig>;
    }
    /**
     * A theme switcher component used to toggle the application theme and/or mode.
     * Allows consumers to set the initial theme (Modus Classic, Modus Modern, etc.) and end-users to toggle modes (Light, Dark).
     */
    interface ModusWcThemeSwitcher {
        /**
          * Custom CSS class to apply to the theme switcher element.
         */
        "customClass"?: string;
    }
    /**
     * A customizable input component used to create time inputs.
     */
    interface ModusWcTimeInput {
        /**
          * Hint for form autofill feature.
         */
        "autoComplete"?: 'on' | 'off';
        /**
          * Indicates that the input should have a border.
         */
        "bordered"?: boolean;
        /**
          * Custom CSS class to apply to the input.
         */
        "customClass"?: string;
        /**
          * ID of a `<datalist>` element that contains pre-defined time options. The value must be the ID of a `<datalist>` element in the same document.
         */
        "datalistId"?: string;
        /**
          * The options to display in the time input dropdown. Options must be in `HH:mm` or `HH:mm:ss` format.
         */
        "datalistOptions": string[];
        /**
          * Whether the form control is disabled.
         */
        "disabled"?: boolean;
        /**
          * Feed