# modus-wc-accordion ## Overview A customizable accordion component used for showing and hiding related groups of content. The component supports a `` for injecting `` elements. See [Collapse](/docs/components-collapse--docs) docs for additional info. ## Properties | Property | Attribute | Description | Type | Default | | ------------- | -------------- | ------------------------------------------- | --------------------- | ------- | | `customClass` | `custom-class` | Custom CSS class to apply to the inner div. | `string \| undefined` | `''` | ## Events | Event | Description | Type | | ---------------- | ------------------------------------------------------------------------------------------ | ---------------------------------------------------- | | `expandedChange` | When a collapse expanded state is changed, this event outputs the relevant index and state | `CustomEvent<{ expanded: boolean; index: number; }>` | ---------------------------------------------- --- # modus-wc-alert ## Overview A customizable alert component used to inform the user about important events ## Properties | Property | Attribute | Description | Type | Default | | ------------------------- | ------------------- | --------------------------------------------------- | ---------------------------------------------------------- | ----------- | | `alertDescription` | `alert-description` | The description of the alert. | `string \| undefined` | `undefined` | | `alertTitle` _(required)_ | `alert-title` | The title of the alert. | `string` | `undefined` | | `customClass` | `custom-class` | Custom CSS class to apply to the outer div element. | `string \| undefined` | `''` | | `dismissible` | `dismissible` | Whether the alert has a dismiss button | `boolean \| undefined` | `false` | | `icon` | `icon` | The Modus icon to render. | `string \| undefined` | `undefined` | | `role` | `role` | Role taken by the alert. Defaults to 'status' | `"alert" \| "log" \| "marquee" \| "status" \| "timer"` | `'status'` | | `variant` | `variant` | The variant of the alert. | `"error" \| "info" \| "success" \| "warning" \| undefined` | `'info'` | ## Events | Event | Description | Type | | -------------- | ----------------------------------------------- | ------------------ | | `dismissClick` | An event that fires when the alert is dismissed | `CustomEvent` | ## Dependencies ### Depends on - [modus-wc-icon](../modus-wc-icon) - [modus-wc-button](../modus-wc-button) ### Graph ```mermaid graph TD; modus-wc-alert --> modus-wc-icon modus-wc-alert --> modus-wc-button style modus-wc-alert fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-autocomplete ## Overview A customizable autocomplete component used to create searchable text inputs. ## Properties | Property | Attribute | Description | Type | Default | | --------------- | ----------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | `bordered` | `bordered` | Indicates that the autocomplete should have a border. | `boolean \| undefined` | `true` | | `customClass` | `custom-class` | Custom CSS class to apply to host element. | `string \| undefined` | `''` | | `debounceMs` | `debounce-ms` | The debounce timeout in milliseconds. Set to 0 to disable debouncing. | `number \| undefined` | `300` | | `disabled` | `disabled` | Whether the form control is disabled. | `boolean \| undefined` | `false` | | `inputId` | `input-id` | The ID of the input element. | `string \| undefined` | `undefined` | | `inputTabIndex` | `input-tab-index` | Determine the control's relative ordering for sequential focus navigation (typically with the Tab key). | `number \| undefined` | `undefined` | | `items` | `items` | The items to display in the menu. Creating a new array of items will ensure proper component re-render. | `IAutocompleteItem[] \| undefined` | `[]` | | `label` | `label` | The text to display within the label. | `string \| undefined` | `undefined` | | `leaveMenuOpen` | `leave-menu-open` | Whether the menu should remain open after an item is selected. | `boolean \| undefined` | `false` | | `minChars` | `min-chars` | The minimum number of characters required to render the menu. | `number` | `0` | | `multiSelect` | `multi-select` | Whether the input allows multiple items to be selected. | `boolean \| undefined` | `false` | | `name` | `name` | Name of the form control. Submitted with the form as part of a name/value pair. | `string \| undefined` | `undefined` | | `noResults` | `no-results` | The content to display when no results are found. | `IAutocompleteNoResults \| undefined` | `{ ariaLabel: 'No results found', label: 'No results found', subLabel: 'Check spelling or try a different keyword', }` | | `placeholder` | `placeholder` | Text that appears in the form control when it has no value set. | `string \| undefined` | `''` | | `readOnly` | `read-only` | Whether the value is editable. | `boolean \| undefined` | `false` | | `required` | `required` | A value is required for the form to be submittable. | `boolean \| undefined` | `false` | | `showSpinner` | `show-spinner` | A spinner that appears when set to true | `boolean \| undefined` | `false` | | `size` | `size` | The size of the autocomplete (input and menu). | `"lg" \| "md" \| "sm" \| undefined` | `'md'` | | `value` | `value` | The value of the control. | `string` | `''` | ## Events | Event | Description | Type | | ------------- | ------------------------------------------------------------------------------------------------- | -------------------------------- | | `chipRemove` | Event emitted when a selected item chip is removed. | `CustomEvent` | | `inputBlur` | Event emitted when the input loses focus. | `CustomEvent` | | `inputChange` | Event emitted when the input value changes. This event is debounced based on the debounceMs prop. | `CustomEvent` | | `inputFocus` | Event emitted when the input gains focus. | `CustomEvent` | | `itemSelect` | Event emitted when a menu item is selected. | `CustomEvent` | ## Dependencies ### Depends on - [modus-wc-chip](../modus-wc-chip) - [modus-wc-text-input](../modus-wc-text-input) - [modus-wc-loader](../modus-wc-loader) - [modus-wc-menu-item](../modus-wc-menu-item) - [modus-wc-input-label](../modus-wc-input-label) - [modus-wc-menu](../modus-wc-menu) ### Graph ```mermaid graph TD; modus-wc-autocomplete --> modus-wc-chip modus-wc-autocomplete --> modus-wc-text-input modus-wc-autocomplete --> modus-wc-loader modus-wc-autocomplete --> modus-wc-menu-item modus-wc-autocomplete --> modus-wc-input-label modus-wc-autocomplete --> modus-wc-menu modus-wc-text-input --> modus-wc-input-label modus-wc-text-input --> modus-wc-input-feedback modus-wc-input-feedback --> modus-wc-icon modus-wc-menu-item --> modus-wc-icon style modus-wc-autocomplete fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-avatar ## Overview A customizable avatar component used to create avatars with different images. ## Properties | Property | Attribute | Description | Type | Default | | ------------------ | -------------- | ------------------------------------------- | ------------------------------------------- | ----------- | | `alt` _(required)_ | `alt` | The image alt attribute for accessibility. | `string` | `undefined` | | `customClass` | `custom-class` | Custom CSS class to apply to the inner div. | `string \| undefined` | `''` | | `imgSrc` | `img-src` | The location of the image. | `string` | `''` | | `shape` | `shape` | The shape of the avatar. | `"circle" \| "square" \| undefined` | `'circle'` | | `size` | `size` | The size of the avatar. | `"lg" \| "md" \| "sm" \| "xs" \| undefined` | `'md'` | ## Dependencies ### Used by - [modus-wc-navbar](../modus-wc-navbar) ### Graph ```mermaid graph TD; modus-wc-navbar --> modus-wc-avatar style modus-wc-avatar fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-badge ## Overview A customizable badge component used to create badges with different sizes, types, and colors. The component supports a `` for injecting content within the badge. ## Properties | Property | Attribute | Description | Type | Default | | ------------- | -------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- | | `color` | `color` | The color variant of the badge. | `"danger" \| "high-contrast" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning"` | `'primary'` | | `customClass` | `custom-class` | Custom CSS class to apply to the span element. | `string` | `''` | | `size` | `size` | The size of the badge. | `"lg" \| "md" \| "sm"` | `'md'` | | `variant` | `variant` | The variant of the badge. | `"counter" \| "filled" \| "text"` | `'filled'` | ---------------------------------------------- --- # modus-wc-breadcrumbs ## Overview A customizable breadcrumbs component used to help users navigate through a website. ## Properties | Property | Attribute | Description | Type | Default | | ------------- | -------------- | ------------------------------------------- | ----------------------------------- | ------- | | `customClass` | `custom-class` | Custom CSS class to apply to the inner div. | `string \| undefined` | `''` | | `items` | `items` | The breadcrumbs to render. | `IBreadcrumb[]` | `[]` | | `size` | `size` | The size of the breadcrumbs. | `"lg" \| "md" \| "sm" \| undefined` | `'md'` | ## Events | Event | Description | Type | | ----------------- | ------------------------------------------- | -------------------------- | | `breadcrumbClick` | Event emitted when a breadcrumb is clicked. | `CustomEvent` | ---------------------------------------------- --- # modus-wc-button ## Overview A customizable button component used to create buttons with different sizes, variants, and types. The component supports a `` for injecting content within the button, similar to a native HTML button ## Properties | Property | Attribute | Description | Type | Default | | ------------- | -------------- | -------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------- | | `color` | `color` | The color variant of the button. | `"danger" \| "primary" \| "secondary" \| "tertiary" \| "warning"` | `'primary'` | | `customClass` | `custom-class` | Custom CSS class to apply to the button element. | `string \| undefined` | `''` | | `disabled` | `disabled` | If true, the button will be disabled. | `boolean \| undefined` | `false` | | `fullWidth` | `full-width` | If true, the button will take the full width of its container. | `boolean \| undefined` | `false` | | `pressed` | `pressed` | If true, the button will be in a pressed state (for toggle buttons). | `boolean \| undefined` | `false` | | `shape` | `shape` | The shape of the button. | `"circle" \| "rectangle" \| "square"` | `'rectangle'` | | `size` | `size` | The size of the button. | `"lg" \| "md" \| "sm" \| "xs"` | `'md'` | | `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` | | `variant` | `variant` | The variant of the button. | `"borderless" \| "filled" \| "outlined"` | `'filled'` | ## Events | Event | Description | Type | | ------------- | ------------------------------------------------------------------- | ------------------------------------------ | | `buttonClick` | Event emitted when the button is clicked or activated via keyboard. | `CustomEvent` | ## Dependencies ### Used by - [modus-wc-alert](../modus-wc-alert) - [modus-wc-modal](../modus-wc-modal) - [modus-wc-navbar](../modus-wc-navbar) ### Graph ```mermaid graph TD; modus-wc-alert --> modus-wc-button modus-wc-modal --> modus-wc-button modus-wc-navbar --> modus-wc-button style modus-wc-button fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-card ## Overview A customizable card component used to group and display content in a way that is easily readable ## Properties | Property | Attribute | Description | Type | Default | | ------------------ | ------------------- | ------------------------------------------------------------- | ----------------------------------------- | ------------ | | `backgroundFigure` | `background-figure` | Makes any \
in the 'header' slot cover the background | `boolean \| undefined` | `false` | | `bordered` | `bordered` | Adds a hard border to the card | `boolean \| undefined` | `false` | | `customClass` | `custom-class` | Custom CSS class to apply | `string \| undefined` | `''` | | `layout` | `layout` | Determines how the card is laid out | `"horizontal" \| "vertical" \| undefined` | `'vertical'` | | `padding` | `padding` | Determines if the interior padding is compact or not | `"compact" \| "normal" \| undefined` | `'normal'` | ## Dependencies ### Used by - [modus-wc-navbar](../modus-wc-navbar) ### Graph ```mermaid graph TD; modus-wc-navbar --> modus-wc-card style modus-wc-card fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-checkbox ## Overview A customizable checkbox component ## Properties | Property | Attribute | Description | Type | Default | | --------------- | ----------------- | ------------------------------------------------------------------------------- | ----------------------------------- | ----------- | | `customClass` | `custom-class` | Custom CSS class to apply to the inner div. | `string \| undefined` | `''` | | `disabled` | `disabled` | The disabled state of the checkbox. | `boolean \| undefined` | `false` | | `indeterminate` | `indeterminate` | The indeterminate state of the checkbox. | `boolean` | `false` | | `inputId` | `input-id` | The ID of the input element. | `string \| undefined` | `undefined` | | `inputTabIndex` | `input-tab-index` | The tabindex of the input. | `number \| undefined` | `undefined` | | `label` | `label` | The text to display within the label. | `string \| undefined` | `undefined` | | `name` | `name` | Name of the form control. Submitted with the form as part of a name/value pair. | `string \| undefined` | `''` | | `required` | `required` | A value is required for the form to be submittable. | `boolean \| undefined` | `false` | | `size` | `size` | The size of the input. | `"lg" \| "md" \| "sm" \| undefined` | `'md'` | | `value` | `value` | The value of the checkbox. | `boolean` | `false` | ## Events | Event | Description | Type | | ------------- | ------------------------------------- | ------------------------- | | `inputBlur` | Emitted when the input loses focus. | `CustomEvent` | | `inputChange` | Emitted when the input value changes. | `CustomEvent` | | `inputFocus` | Emitted when the input gains focus. | `CustomEvent` | ## Dependencies ### Used by - [modus-wc-table](../modus-wc-table) ### Depends on - [modus-wc-input-label](../modus-wc-input-label) ### Graph ```mermaid graph TD; modus-wc-checkbox --> modus-wc-input-label modus-wc-table --> modus-wc-checkbox style modus-wc-checkbox fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-chip ## Overview A customizable chip component used to display information in a compact area ## Properties | Property | Attribute | Description | Type | Default | | ------------- | -------------- | --------------------------------------------------------- | ------------------------------------ | ---------- | | `active` | `active` | Active state of chip. | `boolean \| undefined` | `false` | | `customClass` | `custom-class` | Custom CSS class to apply to the inner div. | `string \| undefined` | `''` | | `disabled` | `disabled` | Whether the chip is disabled. | `boolean \| undefined` | `false` | | `hasError` | `has-error` | Whether the chip has an error. | `boolean \| undefined` | `false` | | `label` | `label` | The label to display in the chip. | `string \| undefined` | `''` | | `showRemove` | `show-remove` | Whether to show the close icon on right side of the chip. | `boolean \| undefined` | `false` | | `size` | `size` | The size of the chip. | `"lg" \| "md" \| "sm" \| undefined` | `'md'` | | `variant` | `variant` | The variant of the chip. | `"filled" \| "outline" \| undefined` | `'filled'` | ## Events | Event | Description | Type | | ------------ | ----------------------------------------------------------------- | ------------------------------------------ | | `chipClick` | Event emitted when the chip is clicked or activated via keyboard. | `CustomEvent` | | `chipRemove` | Event emitted when the close chip icon button is clicked. | `CustomEvent` | ## Dependencies ### Used by - [modus-wc-autocomplete](../modus-wc-autocomplete) ### Graph ```mermaid graph TD; modus-wc-autocomplete --> modus-wc-chip style modus-wc-chip fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-collapse ## Overview A customizable collapse component used for showing and hiding content. The component supports a 'header' and 'content' `` for injecting custom HTML. Do not set ## Properties | Property | Attribute | Description | Type | Default | | ------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- | | `bordered` | `bordered` | Indicates that the component should have a border. | `boolean \| undefined` | `false` | | `collapseId` | `collapse-id` | A unique identifier used to set the id attributes of various elements. | `string \| undefined` | `undefined` | | `customClass` | `custom-class` | Custom CSS class to apply to the outer div. | `string \| undefined` | `''` | | `expanded` | `expanded` | Controls whether the collapse is expanded or not. | `boolean \| undefined` | `false` | | `options` | `options` | Configuration options for rendering the pre-laid out collapse component. Do not set this prop if you intend to use the 'header' slot. | `ICollapseOptions \| undefined` | `undefined` | ## Events | Event | Description | Type | | ---------------- | ----------------------------------------------------------- | ------------------------------------- | | `expandedChange` | Event emitted when the expanded prop is internally changed. | `CustomEvent<{ expanded: boolean; }>` | ## Dependencies ### Depends on - [modus-wc-icon](../modus-wc-icon) ### Graph ```mermaid graph TD; modus-wc-collapse --> modus-wc-icon style modus-wc-collapse fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-date ## Overview A customizable date picker component used to create date inputs. Adheres to WCAG 2.2 standards. ## Properties | Property | Attribute | Description | Type | Default | | --------------- | ----------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------- | ----------- | | `bordered` | `bordered` | Indicates that the input should have a border. | `boolean \| undefined` | `true` | | `customClass` | `custom-class` | Custom CSS class to apply to the input. | `string \| undefined` | `''` | | `disabled` | `disabled` | Whether the form control is disabled. | `boolean \| undefined` | `false` | | `feedback` | `feedback` | Feedback to render below the input. | `IInputFeedbackProp \| undefined` | `undefined` | | `inputId` | `input-id` | The ID of the input element. | `string \| undefined` | `undefined` | | `inputTabIndex` | `input-tab-index` | Determine the control's relative ordering for sequential focus navigation (typically with the Tab key). | `number \| undefined` | `undefined` | | `label` | `label` | The text to display within the label. | `string \| undefined` | `undefined` | | `max` | `max` | Maximum date value. | `string \| undefined` | `undefined` | | `min` | `min` | Minimum date value. | `string \| undefined` | `undefined` | | `name` | `name` | Name of the form control. Submitted with the form as part of a name/value pair. | `string \| undefined` | `undefined` | | `readOnly` | `read-only` | Whether the value is editable. | `boolean \| undefined` | `false` | | `required` | `required` | A value is required or must be checked for the form to be submittable. | `boolean \| undefined` | `false` | | `size` | `size` | The size of the input. | `"lg" \| "md" \| "sm" \| undefined` | `'md'` | | `value` | `value` | The value of the control (yyyy-mm-dd). | `string` | `''` | ## Events | Event | Description | Type | | ------------- | ------------------------------------------- | ------------------------- | | `inputBlur` | Event emitted when the input loses focus. | `CustomEvent` | | `inputChange` | Event emitted when the input value changes. | `CustomEvent` | | `inputFocus` | Event emitted when the input gains focus. | `CustomEvent` | ## Dependencies ### Depends on - [modus-wc-input-label](../modus-wc-input-label) - [modus-wc-input-feedback](../modus-wc-input-feedback) ### Graph ```mermaid graph TD; modus-wc-date --> modus-wc-input-label modus-wc-date --> modus-wc-input-feedback modus-wc-input-feedback --> modus-wc-icon style modus-wc-date fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-divider ## Overview A customizable divider component used to separate content horizontally or vertically ## Properties | Property | Attribute | Description | Type | Default | | ------------- | -------------- | -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------ | | `color` | `color` | The color of the divider line. | `"danger" \| "high-contrast" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| undefined` | `'tertiary'` | | `content` | `content` | The content to display in the divider. | `string \| undefined` | `''` | | `customClass` | `custom-class` | Custom CSS class to apply to the divider element. | `string \| undefined` | `''` | | `orientation` | `orientation` | The orientation of the divider. This is in reference to how content will be rendered around the divider. | `"horizontal" \| "vertical" \| undefined` | `'vertical'` | | `position` | `position` | The position of the divider. | `"center" \| "end" \| "start" \| undefined` | `'center'` | | `responsive` | `responsive` | Whether the divider is responsive or not. | `boolean \| undefined` | `true` | ---------------------------------------------- --- # modus-wc-icon ## Overview A customizable icon component used to render Modus icons. This component requires Modus icons to be installed in the host application. See [Modus Icon Usage](/docs/documentation-modus-icon-usage--docs) for steps. ## Properties | Property | Attribute | Description | Type | Default | | ------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------- | ----------- | | `customClass` | `custom-class` | Custom CSS class to apply to the i element. | `string \| undefined` | `''` | | `decorative` | `decorative` | Indicates that the icon is decorative. When true, sets aria-hidden to hide the icon from screen readers. | `boolean \| undefined` | `true` | | `name` _(required)_ | `name` | The icon name, should match the CSS class in the icon font. | `string` | `undefined` | | `size` | `size` | The icon size, can be "sm", "md", "lg" (a custom size can be specified in CSS). This adjusts the font size for the icon. | `"lg" \| "md" \| "sm" \| "xs" \| undefined` | `'md'` | ## Dependencies ### Used by - [modus-wc-alert](../modus-wc-alert) - [modus-wc-collapse](../modus-wc-collapse) - [modus-wc-input-feedback](../modus-wc-input-feedback) - [modus-wc-menu-item](../modus-wc-menu-item) - [modus-wc-table](../modus-wc-table) - [modus-wc-tabs](../modus-wc-tabs) ### Graph ```mermaid graph TD; modus-wc-alert --> modus-wc-icon modus-wc-collapse --> modus-wc-icon modus-wc-input-feedback --> modus-wc-icon modus-wc-menu-item --> modus-wc-icon modus-wc-table --> modus-wc-icon modus-wc-tabs --> modus-wc-icon style modus-wc-icon fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-input-feedback ## Overview A customizable feedback component used to provide additional context related to form input interactions. 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. ## Properties | Property | Attribute | Description | Type | Default | | -------------------- | -------------- | ------------------------------------------------------------- | --------------------------------------------- | ----------- | | `customClass` | `custom-class` | Custom CSS class to apply to the outer div element. | `string \| undefined` | `''` | | `icon` | `icon` | The Modus icon to use instead of the pre-defined icons. | `string \| undefined` | `''` | | `level` _(required)_ | `level` | The level informs which icon and color that will be rendered. | `"error" \| "info" \| "success" \| "warning"` | `undefined` | | `message` | `message` | The message. | `string \| undefined` | `''` | | `size` | `size` | The size of the feedback component. | `"lg" \| "md" \| "sm" \| undefined` | `'md'` | ## Dependencies ### Used by - [modus-wc-date](../modus-wc-date) - [modus-wc-number-input](../modus-wc-number-input) - [modus-wc-select](../modus-wc-select) - [modus-wc-text-input](../modus-wc-text-input) - [modus-wc-textarea](../modus-wc-textarea) - [modus-wc-time-input](../modus-wc-time-input) ### Depends on - [modus-wc-icon](../modus-wc-icon) ### Graph ```mermaid graph TD; modus-wc-input-feedback --> modus-wc-icon modus-wc-date --> modus-wc-input-feedback modus-wc-number-input --> modus-wc-input-feedback modus-wc-select --> modus-wc-input-feedback modus-wc-text-input --> modus-wc-input-feedback modus-wc-textarea --> modus-wc-input-feedback modus-wc-time-input --> modus-wc-input-feedback style modus-wc-input-feedback fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-input-label ## Overview A customizable input label component. The component supports a `` for injecting additional custom content inside the label, such as icons or formatted text ## Properties | Property | Attribute | Description | Type | Default | | -------------- | ---------------- | ---------------------------------------------------------------------------- | ----------------------------------- | ----------- | | `customClass` | `custom-class` | Additional classes for custom styling. | `string \| undefined` | `''` | | `forId` | `for-id` | The `for` attribute of the label, matching the `id` of the associated input. | `string \| undefined` | `undefined` | | `labelText` | `label-text` | The text to display within the label. | `string \| undefined` | `undefined` | | `required` | `required` | Whether the label indicates a required field. | `boolean \| undefined` | `false` | | `size` | `size` | The size of the label. | `"lg" \| "md" \| "sm" \| undefined` | `'md'` | | `subLabelText` | `sub-label-text` | The text rendered beneath the label. | `string \| undefined` | `undefined` | ## Dependencies ### Used by - [modus-wc-autocomplete](../modus-wc-autocomplete) - [modus-wc-checkbox](../modus-wc-checkbox) - [modus-wc-date](../modus-wc-date) - [modus-wc-number-input](../modus-wc-number-input) - [modus-wc-progress](../modus-wc-progress) - [modus-wc-radio](../modus-wc-radio) - [modus-wc-select](../modus-wc-select) - [modus-wc-slider](../modus-wc-slider) - [modus-wc-switch](../modus-wc-switch) - [modus-wc-text-input](../modus-wc-text-input) - [modus-wc-textarea](../modus-wc-textarea) - [modus-wc-time-input](../modus-wc-time-input) ### Graph ```mermaid graph TD; modus-wc-autocomplete --> modus-wc-input-label modus-wc-checkbox --> modus-wc-input-label modus-wc-date --> modus-wc-input-label modus-wc-number-input --> modus-wc-input-label modus-wc-progress --> modus-wc-input-label modus-wc-radio --> modus-wc-input-label modus-wc-select --> modus-wc-input-label modus-wc-slider --> modus-wc-input-label modus-wc-switch --> modus-wc-input-label modus-wc-text-input --> modus-wc-input-label modus-wc-textarea --> modus-wc-input-label modus-wc-time-input --> modus-wc-input-label style modus-wc-input-label fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-loader ## Overview A customizable loader component used to indicate the loading of content ## Properties | Property | Attribute | Description | Type | Default | | ------------- | -------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------- | ----------- | | `color` | `color` | The color of the loader. | `"accent" \| "error" \| "info" \| "neutral" \| "primary" \| "secondary" \| "success" \| "warning"` | `'primary'` | | `customClass` | `custom-class` | Custom CSS class to apply to the loader element. | `string \| undefined` | `''` | | `size` | `size` | The size of the loader. | `"lg" \| "md" \| "sm" \| "xs"` | `'md'` | | `variant` | `variant` | The variant of the loader. | `"ball" \| "bars" \| "dots" \| "infinity" \| "ring" \| "spinner"` | `'spinner'` | ## Dependencies ### Used by - [modus-wc-autocomplete](../modus-wc-autocomplete) ### Graph ```mermaid graph TD; modus-wc-autocomplete --> modus-wc-loader style modus-wc-loader fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-menu ## Overview A customizable menu component used to display a list of li elements vertically or horizontally. The component supports a `` for injecting custom li elements inside the ul ## Properties | Property | Attribute | Description | Type | Default | | ------------- | -------------- | --------------------------------------------- | ----------------------------------------- | ------------ | | `bordered` | `bordered` | Indicates that the menu should have a border. | `boolean \| undefined` | `undefined` | | `customClass` | `custom-class` | Custom CSS class to apply to the ul element. | `string \| undefined` | `''` | | `orientation` | `orientation` | The orientation of the menu. | `"horizontal" \| "vertical" \| undefined` | `'vertical'` | | `size` | `size` | The size of the menu. | `"lg" \| "md" \| "sm" \| undefined` | `'md'` | ## Dependencies ### Used by - [modus-wc-autocomplete](../modus-wc-autocomplete) - [modus-wc-navbar](../modus-wc-navbar) ### Graph ```mermaid graph TD; modus-wc-autocomplete --> modus-wc-menu modus-wc-navbar --> modus-wc-menu style modus-wc-menu fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-menu-item ## Overview A customizable menu item component used to display the item portion of a menu ## Properties | Property | Attribute | Description | Type | Default | | ------------- | -------------- | ------------------------------------------------------------ | ----------------------------------- | ----------- | | `bordered` | `bordered` | | `boolean \| undefined` | `undefined` | | `customClass` | `custom-class` | Custom CSS class to apply to the li element. | `string \| undefined` | `''` | | `disabled` | `disabled` | The disabled state of the menu item. | `boolean \| undefined` | `undefined` | | `focused` | `focused` | The focused state of the menu item. | `boolean \| undefined` | `undefined` | | `label` | `label` | The text rendered in the menu item. | `string` | `''` | | `selected` | `selected` | The selected state of the menu item. | `boolean \| undefined` | `undefined` | | `size` | `size` | The size of the menu item. | `"lg" \| "md" \| "sm" \| undefined` | `'md'` | | `startIcon` | `start-icon` | The modus icon name to render on the start of the menu item. | `string \| undefined` | `undefined` | | `subLabel` | `sub-label` | The text rendered beneath the label. | `string \| undefined` | `undefined` | | `value` | `value` | The unique identifying value of the menu item. | `string` | `''` | ## Events | Event | Description | Type | | ------------ | ------------------------------------------- | --------------------------------- | | `itemSelect` | Event emitted when a menu item is selected. | `CustomEvent<{ value: string; }>` | ## Dependencies ### Used by - [modus-wc-autocomplete](../modus-wc-autocomplete) - [modus-wc-navbar](../modus-wc-navbar) ### Depends on - [modus-wc-icon](../modus-wc-icon) ### Graph ```mermaid graph TD; modus-wc-menu-item --> modus-wc-icon modus-wc-autocomplete --> modus-wc-menu-item modus-wc-navbar --> modus-wc-menu-item style modus-wc-menu-item fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-modal ## Overview A customizable modal component used to display content in a dialog. The component supports a 'header', 'content', and 'footer' for injecting custom HTML ## Properties | Property | Attribute | Description | Type | Default | | ---------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ----------- | | `backdrop` | `backdrop` | The modal's backdrop. Specify 'static' for a backdrop that doesn't close the modal when clicked outside the modal content. | `"default" \| "static" \| undefined` | `'default'` | | `customClass` | `custom-class` | Custom CSS class to apply | `string \| undefined` | `''` | | `fullscreen` | `fullscreen` | Specifies whether the modal should be displayed full-screen | `boolean \| undefined` | `false` | | `modalId` _(required)_ | `modal-id` | The ID of the inner dialog element | `string` | `undefined` | | `position` | `position` | Specifies the position of the modal | `"bottom" \| "center" \| "top" \| undefined` | `'center'` | | `showClose` | `show-close` | Specifies whether to show the close icon button at the top right of modal | `boolean \| undefined` | `true` | | `showFullscreenToggle` | `show-fullscreen-toggle` | Specifies whether to show the fullscreen toggle icon button | `boolean \| undefined` | `false` | ## Dependencies ### Depends on - [modus-wc-button](../modus-wc-button) ### Graph ```mermaid graph TD; modus-wc-modal --> modus-wc-button style modus-wc-modal fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-navbar ## Overview A customizable navbar component used for top level navigation of all Trimble applications. The component supports a 'main-menu', 'notifications', and 'apps' `` for injecting custom HTML menus. It also supports a 'start', 'center', and 'end' `` for injecting additional custom HTML ## Properties | Property | Attribute | Description | Type | Default | | ----------------------- | ------------------------- | -------------------------------------------------------------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `appsMenuOpen` | `apps-menu-open` | The open state of the apps menu. | `boolean \| undefined` | `false` | | `condensed` | `condensed` | Applies condensed layout and styling. | `boolean \| undefined` | `false` | | `condensedMenuOpen` | `condensed-menu-open` | The open state of the condensed menu. | `boolean \| undefined` | `false` | | `customClass` | `custom-class` | Custom CSS class to apply to the host element. | `string \| undefined` | `''` | | `mainMenuOpen` | `main-menu-open` | The open state of the main menu. | `boolean \| undefined` | `false` | | `notificationsMenuOpen` | `notifications-menu-open` | The open state of the notifications menu. | `boolean \| undefined` | `false` | | `searchDebounceMs` | `search-debounce-ms` | Debounce time in milliseconds for search input changes. Default is 300ms. | `number \| undefined` | `300` | | `searchInputOpen` | `search-input-open` | The open state of the search input. | `boolean \| undefined` | `false` | | `textOverrides` | `text-overrides` | Text replacements for the navbar. | `INavbarTextOverrides \| undefined` | `undefined` | | `userCard` _(required)_ | `user-card` | User information used to render the user card. | `INavbarUserCard` | `undefined` | | `userMenuOpen` | `user-menu-open` | The open state of the user menu. | `boolean \| undefined` | `false` | | `visibility` | `visibility` | The visibility of individual navbar buttons. Default is user profile visible, others hidden. | `INavbarVisibility \| undefined` | `{ ai: false, apps: false, help: false, mainMenu: false, notifications: false, search: false, searchInput: false, user: true, }` | ## Events | Event | Description | Type | | ----------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `aiClick` | Event emitted when the AI button is clicked or activated via keyboard. | `CustomEvent` | | `appsClick` | Event emitted when the apps button is clicked or activated via keyboard. | `CustomEvent` | | `appsMenuOpenChange` | Event emitted when the apps menu open state changes. | `CustomEvent` | | `condensedMenuOpenChange` | Event emitted when the condensed menu open state changes. | `CustomEvent` | | `helpClick` | Event emitted when the help button is clicked or activated via keyboard. | `CustomEvent` | | `mainMenuOpenChange` | Event emitted when the main menu open state changes. | `CustomEvent` | | `myTrimbleClick` | Event emitted when the user profile Access MyTrimble button is clicked or activated via keyboard. | `CustomEvent` | | `notificationsClick` | Event emitted when the notifications button is clicked or activated via keyboard. | `CustomEvent` | | `notificationsMenuOpenChange` | Event emitted when the notifications menu open state changes. | `CustomEvent` | | `searchChange` | Event emitted when the search input value is changed. | `CustomEvent<{ value: string; }>` | | `searchClick` | Event emitted when the search button is clicked or activated via keyboard. | `CustomEvent` | | `searchInputOpenChange` | Event emitted when the search input open state changes. | `CustomEvent` | | `signOutClick` | Event emitted when the user profile sign out button is clicked or activated via keyboard. | `CustomEvent` | | `trimbleLogoClick` | Event emitted when the Trimble logo is clicked or activated via keyboard. | `CustomEvent` | | `userMenuOpenChange` | Event emitted when the user menu open state changes. | `CustomEvent` | ## Dependencies ### Depends on - [modus-wc-toolbar](../modus-wc-toolbar) - [modus-wc-button](../modus-wc-button) - [modus-wc-menu](../modus-wc-menu) - [modus-wc-menu-item](../modus-wc-menu-item) - [modus-wc-text-input](../modus-wc-text-input) - [modus-wc-avatar](../modus-wc-avatar) - [modus-wc-card](../modus-wc-card) ### Graph ```mermaid graph TD; modus-wc-navbar --> modus-wc-toolbar modus-wc-navbar --> modus-wc-button modus-wc-navbar --> modus-wc-menu modus-wc-navbar --> modus-wc-menu-item modus-wc-navbar --> modus-wc-text-input modus-wc-navbar --> modus-wc-avatar modus-wc-navbar --> modus-wc-card modus-wc-menu-item --> modus-wc-icon modus-wc-text-input --> modus-wc-input-label modus-wc-text-input --> modus-wc-input-feedback modus-wc-input-feedback --> modus-wc-icon style modus-wc-navbar fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-number-input ## Overview A customizable input component used to create number inputs with types ## Properties | Property | Attribute | Description | Type | Default | | ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------- | ----------- | | `autoComplete` | `auto-complete` | Hint for form autofill feature. | `"off" \| "on" \| undefined` | `undefined` | | `bordered` | `bordered` | Indicates that the input should have a border. | `boolean \| undefined` | `true` | | `currencySymbol` | `currency-symbol` | The currency symbol to display. | `string \| undefined` | `''` | | `customClass` | `custom-class` | Custom CSS class to apply to the input. | `string \| undefined` | `''` | | `disabled` | `disabled` | Whether the form control is disabled. | `boolean \| undefined` | `false` | | `feedback` | `feedback` | Feedback to render below the input. | `IInputFeedbackProp \| undefined` | `undefined` | | `inputId` | `input-id` | The ID of the input element. | `string \| undefined` | `undefined` | | `inputMode` | `input-mode` | 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. | `"decimal" \| "none" \| "numeric"` | `'numeric'` | | `inputTabIndex` | `input-tab-index` | Determine the control's relative ordering for sequential focus navigation (typically with the Tab key). | `number \| undefined` | `undefined` | | `label` | `label` | The text to display within the label. | `string \| undefined` | `undefined` | | `max` | `max` | The input's maximum value. | `number \| undefined` | `undefined` | | `min` | `min` | The input's minimum value. | `number \| undefined` | `undefined` | | `name` | `name` | Name of the form control. Submitted with the form as part of a name/value pair. | `string \| undefined` | `undefined` | | `placeholder` | `placeholder` | Text that appears in the form control when it has no value set. | `string \| undefined` | `''` | | `readOnly` | `read-only` | Whether the value is editable. | `boolean \| undefined` | `false` | | `required` | `required` | A value is required for the form to be submittable. | `boolean \| undefined` | `false` | | `size` | `size` | The size of the input. | `"lg" \| "md" \| "sm" \| undefined` | `'md'` | | `step` | `step` | The granularity that the value adheres to. | `number \| undefined` | `undefined` | | `type` | `type` | Type of form control. | `"number" \| "range" \| undefined` | `'number'` | | `value` | `value` | The value of the control. | `string` | `''` | ## Events | Event | Description | Type | | ------------- | ------------------------------------------- | ------------------------- | | `inputBlur` | Event emitted when the input loses focus. | `CustomEvent` | | `inputChange` | Event emitted when the input value changes. | `CustomEvent` | | `inputFocus` | Event emitted when the input gains focus. | `CustomEvent` | ## Dependencies ### Depends on - [modus-wc-input-label](../modus-wc-input-label) - [modus-wc-input-feedback](../modus-wc-input-feedback) ### Graph ```mermaid graph TD; modus-wc-number-input --> modus-wc-input-label modus-wc-number-input --> modus-wc-input-feedback modus-wc-input-feedback --> modus-wc-icon style modus-wc-number-input fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-pagination ## Overview Pagination component to navigate through pages of content ## Properties | Property | Attribute | Description | Type | Default | | ----------------- | ------------------- | ------------------------------------------------------------------------ | ------------------------------- | ----------- | | `ariaLabelValues` | `aria-label-values` | Aria label values for pagination buttons | `IAriaLabelValues \| undefined` | `undefined` | | `count` | `count` | Total number of pages | `number` | `1` | | `customClass` | `custom-class` | Custom CSS class to apply | `string \| undefined` | `''` | | `nextButtonText` | `next-button-text` | The next page button text. If not set, an icon control will be used. | `string \| undefined` | `undefined` | | `page` | `page` | The current page number | `number` | `1` | | `prevButtonText` | `prev-button-text` | The previous page button text. If not set, an icon control will be used. | `string \| undefined` | `undefined` | | `size` | `size` | Size of the pagination buttons | `"lg" \| "md" \| "sm"` | `'md'` | ## Events | Event | Description | Type | | ------------ | ------------------------------- | -------------------------- | | `pageChange` | Event emitted when page changes | `CustomEvent` | ## Dependencies ### Used by - [modus-wc-table](../modus-wc-table) ### Graph ```mermaid graph TD; modus-wc-table --> modus-wc-pagination style modus-wc-pagination fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-progress ## Overview 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 ## Properties | Property | Attribute | Description | Type | Default | | --------------- | --------------- | -------------------------------------------------- | ------------------------------------ | ----------- | | `customClass` | `custom-class` | Custom CSS class to apply to the progress element. | `string \| undefined` | `''` | | `indeterminate` | `indeterminate` | The indeterminate state of the progress component. | `boolean` | `false` | | `label` | `label` | A text label to render within the progress bar | `string \| undefined` | `undefined` | | `max` | `max` | The progress component's maximum value. | `number \| undefined` | `100` | | `value` | `value` | The value of the progress component. | `number` | `0` | | `variant` | `variant` | The variant of the progress component. | `"default" \| "radial" \| undefined` | `'default'` | ## Dependencies ### Depends on - [modus-wc-input-label](../modus-wc-input-label) ### Graph ```mermaid graph TD; modus-wc-progress --> modus-wc-input-label style modus-wc-progress fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-radio ## Overview A customizable radio component ## Properties | Property | Attribute | Description | Type | Default | | --------------- | ----------------- | ------------------------------------------------------------------------------- | ----------------------------------- | ----------- | | `customClass` | `custom-class` | Custom CSS class to apply to the inner div. | `string \| undefined` | `''` | | `disabled` | `disabled` | The disabled state of the radio. | `boolean \| undefined` | `false` | | `inputId` | `input-id` | The ID of the input element. | `string \| undefined` | `undefined` | | `inputTabIndex` | `input-tab-index` | The tabindex of the input. | `number \| undefined` | `undefined` | | `label` | `label` | The text to display within the label. | `string \| undefined` | `undefined` | | `name` | `name` | Name of the form control. Submitted with the form as part of a name/value pair. | `string \| undefined` | `''` | | `required` | `required` | A value is required for the form to be submittable. | `boolean \| undefined` | `false` | | `size` | `size` | The size of the input. | `"lg" \| "md" \| "sm" \| undefined` | `'md'` | | `value` | `value` | The value of the radio. | `boolean` | `false` | ## Events | Event | Description | Type | | ------------- | ------------------------------------- | ------------------------- | | `inputBlur` | Emitted when the input loses focus. | `CustomEvent` | | `inputChange` | Emitted when the input value changes. | `CustomEvent` | | `inputFocus` | Emitted when the input gains focus. | `CustomEvent` | ## Dependencies ### Depends on - [modus-wc-input-label](../modus-wc-input-label) ### Graph ```mermaid graph TD; modus-wc-radio --> modus-wc-input-label style modus-wc-radio fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-rating ## Overview A rating component that allows users to choose a rating from predefined options ## Properties | Property | Attribute | Description | Type | Default | | ------------------ | --------------------- | ----------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | | `allowHalf` | `allow-half` | Whether to allow half-ratings. Only applies to star and heart variants. | `boolean \| undefined` | `false` | | `count` | `count` | The number of rating items to display | `number` | `5` | | `customClass` | `custom-class` | Custom CSS class to apply | `string \| undefined` | `''` | | `disabled` | `disabled` | Whether the rating component is disabled | `boolean \| undefined` | `false` | | `getAriaLabelText` | `get-aria-label-text` | Function to provide aria-label text for a given rating-item index | `((ratingValue: number) => string) \| undefined` | `` (ratingValue) => `Rating item ${ratingValue}` `` | | `size` | `size` | The size of the rating component | `"lg" \| "md" \| "sm" \| undefined` | `'md'` | | `value` | `value` | The current value of the rating | `number` | `0` | | `variant` | `variant` | The variant of the rating scale | `"heart" \| "smiley" \| "star" \| "thumb"` | `'smiley'` | ## Events | Event | Description | Type | | -------------- | ------------------------------------- | ---------------------------- | | `ratingChange` | Event emitted when the rating changes | `CustomEvent` | ---------------------------------------------- --- # modus-wc-select ## Overview A customizable select component used to pick a value from a list of options ## Properties | Property | Attribute | Description | Type | Default | | --------------- | ----------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------- | ----------- | | `bordered` | `bordered` | Indicates that the input should have a border. | `boolean \| undefined` | `true` | | `customClass` | `custom-class` | Custom CSS class to apply to the inner div. | `string \| undefined` | `''` | | `disabled` | `disabled` | Whether the form control is disabled. | `boolean \| undefined` | `false` | | `feedback` | `feedback` | Feedback to render below the input. | `IInputFeedbackProp \| undefined` | `undefined` | | `inputId` | `input-id` | The ID of the input element. | `string \| undefined` | `undefined` | | `inputTabIndex` | `input-tab-index` | Determine the control's relative ordering for sequential focus navigation (typically with the Tab key). | `number \| undefined` | `undefined` | | `label` | `label` | The text to display within the label. | `string \| undefined` | `undefined` | | `name` | `name` | Name of the form control. Submitted with the form as part of a name/value pair. | `string \| undefined` | `undefined` | | `options` | `options` | The options to display in the select dropdown. | `ISelectOption[]` | `[]` | | `required` | `required` | A value is required for the form to be submittable. | `boolean \| undefined` | `false` | | `size` | `size` | The size of the input. | `"lg" \| "md" \| "sm" \| undefined` | `'md'` | | `value` | `value` | The value of the control. | `string` | `''` | ## Events | Event | Description | Type | | ------------- | ------------------------------------------- | ------------------------- | | `inputBlur` | Event emitted when the input loses focus. | `CustomEvent` | | `inputChange` | Event emitted when the input value changes. | `CustomEvent` | | `inputFocus` | Event emitted when the input gains focus. | `CustomEvent` | ## Dependencies ### Used by - [modus-wc-table](../modus-wc-table) ### Depends on - [modus-wc-input-label](../modus-wc-input-label) - [modus-wc-input-feedback](../modus-wc-input-feedback) ### Graph ```mermaid graph TD; modus-wc-select --> modus-wc-input-label modus-wc-select --> modus-wc-input-feedback modus-wc-input-feedback --> modus-wc-icon modus-wc-table --> modus-wc-select style modus-wc-select fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-side-navigation ## Overview A customizable side navigation component for organizing primary navigation and content areas in an application. ## Properties | Property | Attribute | Description | Type | Default | | ------------------------ | --------------------------- | ------------------------------------------------------------------------ | --------------------- | --------- | | `collapseOnClickOutside` | `collapse-on-click-outside` | Whether the side navigation should collapse when clicking outside of it. | `boolean` | `true` | | `customClass` | `custom-class` | Custom CSS class to apply to the inner div. | `string \| undefined` | `''` | | `expanded` | `expanded` | Whether the side navigation is expanded. | `boolean` | `false` | | `maxWidth` | `max-width` | Maximum width of the side navigation panel in an expanded state. | `string` | `'256px'` | ---------------------------------------------- --- # modus-wc-skeleton ## Overview A customizable skeleton component used to create skeletons of various sizes and shapes ## Properties | Property | Attribute | Description | Type | Default | | ------------- | -------------- | ------------------------------------------- | -------------------------------------- | ---------------------------------- | | `customClass` | `custom-class` | Custom CSS class to apply to the inner div. | `string \| undefined` | `''` | | `height` | `height` | The height of the skeleton. | `string` | `'var(--modus-wc-line-height-md)'` | | `shape` | `shape` | The shape of the skeleton. | `"circle" \| "rectangle" \| undefined` | `'rectangle'` | | `width` | `width` | The width of the skeleton. | `string` | `'100%'` | ---------------------------------------------- --- # modus-wc-slider ## Overview A customizable slider component ## Properties | Property | Attribute | Description | Type | Default | | --------------- | ----------------- | ------------------------------------------------------------------------------- | ----------------------------------- | ----------- | | `customClass` | `custom-class` | Custom CSS class to apply to the inner div. | `string \| undefined` | `''` | | `disabled` | `disabled` | The disabled state of the slider. | `boolean \| undefined` | `false` | | `inputId` | `input-id` | The ID of the input element. | `string \| undefined` | `undefined` | | `inputTabIndex` | `input-tab-index` | The tabindex of the input. | `number \| undefined` | `undefined` | | `label` | `label` | The text to display within the label. | `string \| undefined` | `undefined` | | `max` | `max` | The maximum slider value. | `number \| undefined` | `undefined` | | `min` | `min` | The minimum slider value. | `number \| undefined` | `undefined` | | `name` | `name` | Name of the form control. Submitted with the form as part of a name/value pair. | `string \| undefined` | `''` | | `required` | `required` | A value is required for the form to be submittable. | `boolean \| undefined` | `false` | | `size` | `size` | The size of the input. | `"lg" \| "md" \| "sm" \| undefined` | `'md'` | | `step` | `step` | The increment of the slider. | `number \| undefined` | `undefined` | | `value` | `value` | The value of the slider. | `number` | `0` | ## Events | Event | Description | Type | | ------------- | ------------------------------------- | ------------------------- | | `inputBlur` | Emitted when the input loses focus. | `CustomEvent` | | `inputChange` | Emitted when the input value changes. | `CustomEvent` | | `inputFocus` | Emitted when the input gains focus. | `CustomEvent` | ## Dependencies ### Depends on - [modus-wc-input-label](../modus-wc-input-label) ### Graph ```mermaid graph TD; modus-wc-slider --> modus-wc-input-label style modus-wc-slider fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-stepper ## Overview Used to show a list of steps in a process. ## Properties | Property | Attribute | Description | Type | Default | | ------------- | -------------- | ----------------------------------------------- | ----------------------------------------- | ----------- | | `customClass` | `custom-class` | Custom CSS class to apply to the steps element. | `string \| undefined` | `''` | | `orientation` | `orientation` | The orientation of the steps. | `"horizontal" \| "vertical" \| undefined` | `undefined` | | `steps` | `steps` | The steps to display. | `IStepperItem[]` | `[]` | ---------------------------------------------- --- # modus-wc-switch ## Overview A customizable checkbox component ## Properties | Property | Attribute | Description | Type | Default | | --------------- | ----------------- | ------------------------------------------------------------------------------- | ----------------------------------- | ----------- | | `customClass` | `custom-class` | Custom CSS class to apply to the inner div. | `string \| undefined` | `''` | | `disabled` | `disabled` | The disabled state of the switch. | `boolean \| undefined` | `false` | | `indeterminate` | `indeterminate` | The indeterminate state of the switch. | `boolean` | `false` | | `inputId` | `input-id` | The ID of the input element. | `string \| undefined` | `undefined` | | `inputTabIndex` | `input-tab-index` | The tabindex of the input. | `number \| undefined` | `undefined` | | `label` | `label` | The text to display within the label. | `string \| undefined` | `undefined` | | `name` | `name` | Name of the form control. Submitted with the form as part of a name/value pair. | `string \| undefined` | `''` | | `required` | `required` | A value is required for the form to be submittable. | `boolean \| undefined` | `false` | | `size` | `size` | The size of the input. | `"lg" \| "md" \| "sm" \| undefined` | `'md'` | | `value` | `value` | The value of the switch. | `boolean` | `false` | ## Events | Event | Description | Type | | ------------- | ------------------------------------- | ------------------------- | | `inputBlur` | Emitted when the input loses focus. | `CustomEvent` | | `inputChange` | Emitted when the input value changes. | `CustomEvent` | | `inputFocus` | Emitted when the input gains focus. | `CustomEvent` | ## Dependencies ### Depends on - [modus-wc-input-label](../modus-wc-input-label) ### Graph ```mermaid graph TD; modus-wc-switch --> modus-wc-input-label style modus-wc-switch fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-table ## Properties | Property | Attribute | Description | Type | Default | | ---------------------- | ------------------------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------- | --------------- | | `columns` _(required)_ | `columns` | An array of column definitions. | `ITableColumn[]` | `undefined` | | `currentPage` | `current-page` | The current page number in pagination (1-based index). | `number` | `1` | | `customClass` | `custom-class` | Custom CSS class to apply to the inner div. | `string \| undefined` | `''` | | `data` _(required)_ | `data` | An array of data objects. | `Record[]` | `undefined` | | `density` | `density` | The density of the table, used to save space or increase readability. | `"comfortable" \| "compact" \| "relaxed" \| undefined` | `'comfortable'` | | `editable` | `editable` | Enable cell editing. Either a boolean (all rows) or a predicate per row. | `((row: Record) => boolean) \| boolean \| undefined` | `false` | | `hover` | `hover` | Enable hover effect on table rows. | `boolean \| undefined` | `true` | | `pageSizeOptions` | `page-size-options` | Available options for the number of rows per page. | `number[]` | `[5, 10, 15]` | | `paginated` | `paginated` | Enable pagination for the table. | `boolean \| undefined` | `false` | | `selectable` | `selectable` | Row selection mode: 'none' for no selection, 'single' for single row, 'multi' for multiple rows. | `"multi" \| "none" \| "single" \| undefined` | `'none'` | | `selectedRowIds` | `selected-row-ids` | Array of selected row IDs. Used for controlled selection state. | `string[] \| undefined` | `undefined` | | `showPageSizeSelector` | `show-page-size-selector` | Show/hide the page size selector in pagination. | `boolean \| undefined` | `true` | | `sortable` | `sortable` | Enable sorting functionality for sortable columns. | `boolean \| undefined` | `true` | | `zebra` | `zebra` | Zebra striped tables differentiate rows by styling them in an alternating fashion. | `boolean \| undefined` | `false` | ## Events | Event | Description | Type | | -------------------- | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | | `cellEditCommit` | Emits when cell editing is committed with the new value. | `CustomEvent<{ rowIndex: number; colId: string; newValue: unknown; updatedRow: Record; }>` | | `cellEditStart` | Emits when cell editing starts. | `CustomEvent<{ rowIndex: number; colId: string; }>` | | `paginationChange` | Emits when pagination changes with the new pagination state. | `CustomEvent` | | `rowClick` | Emits when a row is clicked. | `CustomEvent<{ row: Record; index: number; }>` | | `rowSelectionChange` | Emits when row selection changes with the selected rows and their IDs. | `CustomEvent<{ selectedRows: Record[]; selectedRowIds: string[]; }>` | | `sortChange` | Emits when sorting changes with the new sorting state. | `CustomEvent` | ## Dependencies ### Depends on - [modus-wc-select](../modus-wc-select) - [modus-wc-checkbox](../modus-wc-checkbox) - [modus-wc-icon](../modus-wc-icon) - [modus-wc-pagination](../modus-wc-pagination) ### Graph ```mermaid graph TD; modus-wc-table --> modus-wc-select modus-wc-table --> modus-wc-checkbox modus-wc-table --> modus-wc-icon modus-wc-table --> modus-wc-pagination modus-wc-select --> modus-wc-input-label modus-wc-select --> modus-wc-input-feedback modus-wc-input-feedback --> modus-wc-icon modus-wc-checkbox --> modus-wc-input-label style modus-wc-table fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-tabs ## Overview A customizable tabs component used to create groups of tabs. ## Properties | Property | Attribute | Description | Type | Default | | ---------------- | ------------------ | ------------------------------------------- | ---------------------------------------------------------- | ------------ | | `activeTabIndex` | `active-tab-index` | The current active tab | `number` | `0` | | `customClass` | `custom-class` | Custom CSS class to apply to the inner div. | `string \| undefined` | `''` | | `size` | `size` | The size of the tabs. | `"lg" \| "md" \| "sm" \| undefined` | `'md'` | | `tabStyle` | `tab-style` | Additional styling for the tabs. | `"bordered" \| "boxed" \| "lifted" \| "none" \| undefined` | `'bordered'` | | `tabs` | `tabs` | The tabs to display. | `ITab[]` | `[]` | ## Events | Event | Description | Type | | ----------- | ------------------------------------------------------------------ | ------------------------------------------------------- | | `tabChange` | When a tab is switched to, this event outputs the relevant indices | `CustomEvent<{ previousTab: number; newTab: number; }>` | ## Dependencies ### Depends on - [modus-wc-icon](../modus-wc-icon) ### Graph ```mermaid graph TD; modus-wc-tabs --> modus-wc-icon style modus-wc-tabs fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-text-input ## Overview A customizable input component used to create text inputs with types. ## Properties | Property | Attribute | Description | Type | Default | | ---------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | | `autoCapitalize` | `auto-capitalize` | Controls automatic capitalization in inputted text. | `"characters" \| "none" \| "off" \| "on" \| "sentences" \| "words" \| undefined` | `undefined` | | `autoComplete` | `auto-complete` | Hint for form autofill feature. | `AutocompleteTypes \| undefined` | `undefined` | | `autoCorrect` | `auto-correct` | Controls automatic correction in inputted text. Support by browser varies. | `"off" \| "on" \| undefined` | `undefined` | | `bordered` | `bordered` | Indicates that the input should have a border. | `boolean \| undefined` | `true` | | `clearAriaLabel` | `clear-aria-label` | Aria label for the clear icon button. | `string \| undefined` | `'Clear text'` | | `customClass` | `custom-class` | Custom CSS class to apply to the input. | `string \| undefined` | `''` | | `disabled` | `disabled` | Whether the form control is disabled. | `boolean \| undefined` | `false` | | `enterkeyhint` | `enterkeyhint` | A hint to the browser for which enter key to display. | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | `undefined` | | `feedback` | `feedback` | Feedback to render below the input. | `IInputFeedbackProp \| undefined` | `undefined` | | `includeClear` | `include-clear` | Show the clear button within the input field. | `boolean \| undefined` | `false` | | `includeSearch` | `include-search` | Show the search icon within the input field. | `boolean \| undefined` | `false` | | `inputId` | `input-id` | The ID of the input element. | `string \| undefined` | `undefined` | | `inputMode` | `input-mode` | 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. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url"` | `'text'` | | `inputTabIndex` | `input-tab-index` | Determine the control's relative ordering for sequential focus navigation (typically with the Tab key). | `number \| undefined` | `undefined` | | `label` | `label` | The text to display within the label. | `string \| undefined` | `undefined` | | `maxLength` | `max-length` | Maximum length (number of characters) of value. | `number \| undefined` | `undefined` | | `minLength` | `min-length` | Minimum length (number of characters) of value. | `number \| undefined` | `undefined` | | `name` | `name` | Name of the form control. Submitted with the form as part of a name/value pair. | `string \| undefined` | `undefined` | | `pattern` | `pattern` | Pattern the value must match to be valid | `string \| undefined` | `undefined` | | `placeholder` | `placeholder` | Text that appears in the form control when it has no value set. | `string \| undefined` | `''` | | `readOnly` | `read-only` | Whether the value is editable. | `boolean \| undefined` | `false` | | `required` | `required` | A value is required for the form to be submittable. | `boolean \| undefined` | `false` | | `size` | `size` | The size of the input. | `"lg" \| "md" \| "sm" \| undefined` | `'md'` | | `type` | `type` | Type of form control. | `"date" \| "datetime-local" \| "email" \| "month" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "time" \| "url" \| "week" \| undefined` | `'text'` | | `value` | `value` | The value of the control. | `string` | `''` | ## Events | Event | Description | Type | | ------------- | ------------------------------------------- | ------------------------- | | `inputBlur` | Event emitted when the input loses focus. | `CustomEvent` | | `inputChange` | Event emitted when the input value changes. | `CustomEvent` | | `inputFocus` | Event emitted when the input gains focus. | `CustomEvent` | ## Dependencies ### Used by - [modus-wc-autocomplete](../modus-wc-autocomplete) - [modus-wc-navbar](../modus-wc-navbar) ### Depends on - [modus-wc-input-label](../modus-wc-input-label) - [modus-wc-input-feedback](../modus-wc-input-feedback) ### Graph ```mermaid graph TD; modus-wc-text-input --> modus-wc-input-label modus-wc-text-input --> modus-wc-input-feedback modus-wc-input-feedback --> modus-wc-icon modus-wc-autocomplete --> modus-wc-text-input modus-wc-navbar --> modus-wc-text-input style modus-wc-text-input fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-textarea ## Overview A customizable textarea component. ## Properties | Property | Attribute | Description | Type | Default | | --------------- | ----------------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | | `autoCorrect` | `auto-correct` | Controls automatic correction in inputted text. Support by browser varies. | `"off" \| "on" \| undefined` | `undefined` | | `bordered` | `bordered` | Indicates that the input should have a border. | `boolean \| undefined` | `true` | | `customClass` | `custom-class` | Custom CSS class to apply to the textarea (supports DaisyUI). | `string \| undefined` | `''` | | `disabled` | `disabled` | The disabled state of the textarea. | `boolean \| undefined` | `false` | | `enterkeyhint` | `enterkeyhint` | A hint to the browser for which enter key to display. | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | `undefined` | | `feedback` | `feedback` | Feedback to render below the input. | `IInputFeedbackProp \| undefined` | `undefined` | | `inputId` | `input-id` | The ID of the input element. | `string \| undefined` | `undefined` | | `inputTabIndex` | `input-tab-index` | The tabindex of the input. | `number \| undefined` | `undefined` | | `label` | `label` | The text to display within the label. | `string \| undefined` | `undefined` | | `maxLength` | `max-length` | The maximum number of characters allowed in the textarea. | `number \| undefined` | `undefined` | | `name` | `name` | Name of the form control. Submitted with the form as part of a name/value pair. | `string \| undefined` | `undefined` | | `placeholder` | `placeholder` | The placeholder text for the textarea. | `string \| undefined` | `''` | | `readonly` | `readonly` | The readonly state of the textarea. | `boolean \| undefined` | `false` | | `required` | `required` | A value is required for the form to be submittable. | `boolean \| undefined` | `false` | | `rows` | `rows` | The number of visible text lines for the textarea. | `number \| undefined` | `undefined` | | `size` | `size` | The size of the input. | `"lg" \| "md" \| "sm" \| undefined` | `'md'` | | `value` | `value` | The value of the textarea. | `string` | `''` | ## Events | Event | Description | Type | | ------------- | ------------------------------------- | ------------------------- | | `inputBlur` | Emitted when the input loses focus. | `CustomEvent` | | `inputChange` | Emitted when the input value changes. | `CustomEvent` | | `inputFocus` | Emitted when the input gains focus. | `CustomEvent` | ## Dependencies ### Depends on - [modus-wc-input-label](../modus-wc-input-label) - [modus-wc-input-feedback](../modus-wc-input-feedback) ### Graph ```mermaid graph TD; modus-wc-textarea --> modus-wc-input-label modus-wc-textarea --> modus-wc-input-feedback modus-wc-input-feedback --> modus-wc-icon style modus-wc-textarea fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-theme-switcher ## Overview 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). ## Properties | Property | Attribute | Description | Type | Default | | ------------- | -------------- | -------------------------------------------------------- | --------------------- | ------- | | `customClass` | `custom-class` | Custom CSS class to apply to the theme switcher element. | `string \| undefined` | `''` | ## Events | Event | Description | Type | | ------------- | ---------------------------------------------- | --------------------------- | | `themeChange` | An event that fires when the theme is changed. | `CustomEvent` | ---------------------------------------------- --- # modus-wc-time-input ## Overview A customizable input component used to create time inputs. ## Properties | Property | Attribute | Description | Type | Default | | ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ----------- | | `autoComplete` | `auto-complete` | Hint for form autofill feature. | `"off" \| "on" \| undefined` | `undefined` | | `bordered` | `bordered` | Indicates that the input should have a border. | `boolean \| undefined` | `true` | | `customClass` | `custom-class` | Custom CSS class to apply to the input. | `string \| undefined` | `''` | | `datalistId` | `datalist-id` | ID of a `` element that contains pre-defined time options. The value must be the ID of a `` element in the same document. | `string \| undefined` | `undefined` | | `datalistOptions` | `datalist-options` | The options to display in the time input dropdown. Options must be in `HH:mm` or `HH:mm:ss` format. | `string[]` | `[]` | | `disabled` | `disabled` | Whether the form control is disabled. | `boolean \| undefined` | `false` | | `feedback` | `feedback` | Feedback to render below the input. | `IInputFeedbackProp \| undefined` | `undefined` | | `inputId` | `input-id` | The ID of the input element. | `string \| undefined` | `undefined` | | `inputTabIndex` | `input-tab-index` | Determine the control's relative ordering for sequential focus navigation (typically with the Tab key). | `number \| undefined` | `undefined` | | `label` | `label` | The text to display within the label. | `string \| undefined` | `undefined` | | `max` | `max` | Maximum value. Format: `HH:mm`, `HH:mm:ss`. | `string \| undefined` | `undefined` | | `min` | `min` | Minimum value. Format: `HH:mm`, `HH:mm:ss.` | `string \| undefined` | `undefined` | | `name` | `name` | Name of the form control. Submitted with the form as part of a name/value pair. | `string \| undefined` | `undefined` | | `readOnly` | `read-only` | Whether the value is editable. | `boolean \| undefined` | `false` | | `required` | `required` | A value is required for the form to be submittable. | `boolean \| undefined` | `false` | | `showSeconds` | `show-seconds` | Displays the time input format as `HH:mm:ss` if `true`. Internally sets the `step` to 1 second. If a `step` value is provided, it will override this attribute. | `boolean \| undefined` | `false` | | `size` | `size` | The size of the input. | `"lg" \| "md" \| "sm" \| undefined` | `'md'` | | `step` | `step` | Specifies the granularity that the `value` must adhere to. Value of step given in seconds. Default value is 60 seconds. Overrides the `seconds` attribute if both are provided. | `number \| undefined` | `undefined` | | `value` | `value` | The value of the time input. Always in 24-hour format that includes leading zeros: `HH:mm` or `HH:mm:ss`, regardless of input format which is likely to be selected based on user's locale (or by the user agent). If time includes seconds the format is always `HH:mm:ss`. | `string` | `''` | ## Events | Event | Description | Type | | ------------- | ------------------------------------------- | ------------------------- | | `inputBlur` | Event emitted when the input loses focus. | `CustomEvent` | | `inputChange` | Event emitted when the input value changes. | `CustomEvent` | | `inputFocus` | Event emitted when the input gains focus. | `CustomEvent` | ## Dependencies ### Depends on - [modus-wc-input-label](../modus-wc-input-label) - [modus-wc-input-feedback](../modus-wc-input-feedback) ### Graph ```mermaid graph TD; modus-wc-time-input --> modus-wc-input-label modus-wc-time-input --> modus-wc-input-feedback modus-wc-input-feedback --> modus-wc-icon style modus-wc-time-input fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-toast ## Overview A customizable toast component used to stack elements, positioned on the corner of a page. The component supports a `` for injecting additional custom content inside the toast. ## Properties | Property | Attribute | Description | Type | Default | | ------------- | -------------- | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `customClass` | `custom-class` | Additional classes for custom styling. | `string \| undefined` | `''` | | `delay` | `delay` | Time taken to dismiss the toast in milliseconds | `number \| undefined` | `undefined` | | `position` | `position` | The position of the toast in the parent container. | `"bottom-center" \| "bottom-end" \| "bottom-start" \| "middle-center" \| "middle-end" \| "middle-start" \| "top-center" \| "top-end" \| "top-start" \| undefined` | `'top-end'` | ---------------------------------------------- --- # modus-wc-toolbar ## Overview A customizable toolbar component used to organize content across the entire page. ## Properties | Property | Attribute | Description | Type | Default | | ------------- | -------------- | ------------------------------------------- | --------------------- | ------- | | `customClass` | `custom-class` | Custom CSS class to apply to the outer div. | `string \| undefined` | `''` | ## Dependencies ### Used by - [modus-wc-navbar](../modus-wc-navbar) ### Graph ```mermaid graph TD; modus-wc-navbar --> modus-wc-toolbar style modus-wc-toolbar fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- --- # modus-wc-tooltip ## Overview A customizable tooltip component used to create tooltips with different content. ## Properties | Property | Attribute | Description | Type | Default | | ------------- | -------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ----------- | | `content` | `content` | The text content of the tooltip. | `string` | `''` | | `customClass` | `custom-class` | Custom CSS class to apply to the inner div. | `string \| undefined` | `''` | | `disabled` | `disabled` | Disables displaying the tooltip on hover | `boolean \| undefined` | `false` | | `forceOpen` | `force-open` | Use this attribute to force the tooltip to remain open. | `boolean \| undefined` | `undefined` | | `position` | `position` | The position that the tooltip will render in relation to the element. | `"auto" \| "bottom" \| "left" \| "right" \| "top" \| undefined` | `'auto'` | | `tooltipId` | `tooltip-id` | The ID of the tooltip element, useful for setting the "aria-describedby" attribute of related elements. | `string \| undefined` | `undefined` | ---------------------------------------------- --- # modus-wc-typography ## Overview A customizable typography component used to render text with different sizes, variants, and weights. ## Properties | Property | Attribute | Description | Type | Default | | ------------- | -------------- | ---------------------------------------------------- | --------------------------------------------------------------- | ---------- | | `customClass` | `custom-class` | Custom CSS class to apply to the typography element. | `string \| undefined` | `''` | | `size` | `size` | The size of the font. | `"lg" \| "md" \| "sm" \| "xs" \| undefined` | `'md'` | | `variant` | `variant` | The variant of the typography component. | `"body" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p"` | `'p'` | | `weight` | `weight` | The weight of the text. | `"bold" \| "light" \| "normal" \| "semibold" \| undefined` | `'normal'` | ----------------------------------------------