@momentum-design/components 0.129.21 → 0.129.23

package/dist/react/card/index.d.ts

@@ -1,32 +1,28 @@
 import Component from '../../components/card';
 /**
  * The card component allows users to organize information in a structured and tangible
- * format that is visually appealing. `mdc-card` is a static component that supports
- * the following features:
- * - Image
- * - Header
- *    - Icon
- *    - Title
- *    - Subtitle
- * - Body
+ * format that is visually appealing. `mdc-card` is a static component.
  *
- * The card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.
+ * ## Card Structure
+ * - **Image**: Optional visual content at the top
+ * - **Header**: Contains icon, title, subtitle, and action buttons
+ * - **Body**: Main text content area
+ * - **Footer**: Optional footer with links and buttons
  *
- * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.
+ * ## Features
+ * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).
+ * - Can be made interactive by adding elements to slots like `icon-button`, `footer-link`, and footer buttons.
  *
- * To make this card interactive, use the following slots:
- * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).
- * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.
- * - `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.
- * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component
- * within the footer section.
+ * @tagname mdc-card
  *
- * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.
+ * @dependency mdc-icon
+ * @dependency mdc-text
  *
  * @slot image - This slot is for overriding the image content of the card
  * @slot before-body - This slot is for passing the content before the body
  * @slot body - This slot is for passing the text content for the card
  * @slot after-body - This slot is for passing the content after the body
+ * @slot icon-button - This slot supports action icon buttons in the header section (maximum of 3 buttons)
  * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
  * @slot footer-button-primary - This slot is for passing primary variant of
  * `mdc-button` component within the footer section.
@@ -46,13 +42,7 @@ import Component from '../../components/card';
  * @csspart icon-button - The icon button part of the card header
  * @csspart text - The text part of the card
  *
- * @tagname mdc-card
- *
- * @dependency mdc-icon
- * @dependency mdc-text
- *
  * @cssproperty --mdc-card-width - The width of the card
- *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/card/index.js

@@ -4,32 +4,28 @@ import Component from '../../components/card';
 import { TAG_NAME } from '../../components/card/card.constants';
 /**
  * The card component allows users to organize information in a structured and tangible
- * format that is visually appealing. `mdc-card` is a static component that supports
- * the following features:
- * - Image
- * - Header
- *    - Icon
- *    - Title
- *    - Subtitle
- * - Body
+ * format that is visually appealing. `mdc-card` is a static component.
  *
- * The card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.
+ * ## Card Structure
+ * - **Image**: Optional visual content at the top
+ * - **Header**: Contains icon, title, subtitle, and action buttons
+ * - **Body**: Main text content area
+ * - **Footer**: Optional footer with links and buttons
  *
- * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.
+ * ## Features
+ * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).
+ * - Can be made interactive by adding elements to slots like `icon-button`, `footer-link`, and footer buttons.
  *
- * To make this card interactive, use the following slots:
- * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).
- * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.
- * - `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.
- * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component
- * within the footer section.
+ * @tagname mdc-card
  *
- * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.
+ * @dependency mdc-icon
+ * @dependency mdc-text
  *
  * @slot image - This slot is for overriding the image content of the card
  * @slot before-body - This slot is for passing the content before the body
  * @slot body - This slot is for passing the text content for the card
  * @slot after-body - This slot is for passing the content after the body
+ * @slot icon-button - This slot supports action icon buttons in the header section (maximum of 3 buttons)
  * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
  * @slot footer-button-primary - This slot is for passing primary variant of
  * `mdc-button` component within the footer section.
@@ -49,13 +45,7 @@ import { TAG_NAME } from '../../components/card/card.constants';
  * @csspart icon-button - The icon button part of the card header
  * @csspart text - The text part of the card
  *
- * @tagname mdc-card
- *
- * @dependency mdc-icon
- * @dependency mdc-text
- *
  * @cssproperty --mdc-card-width - The width of the card
- *
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/react/cardbutton/index.d.ts

@@ -4,21 +4,18 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
 /**
  * cardbutton component looks like a card and behaves as a button component.
  *
- * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.
- * Make sure to pass only non-interactable elements within the slots.
+ * ## Features
+ * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).
+ * - Interacting anywhere on the card triggers the click event.
+ * - Use `name` and `value` attributes when using within forms.
+ *
+ * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.
  *
  * @tagname mdc-cardbutton
  *
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @event click - (React: onClick) Event that gets dispatched when the card is clicked.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
- * It fires the click event when enter key is used.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
- * It fires the click event when space key is used.
- * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- *
  * @slot image - This slot is for overriding the image content of the card
  * @slot before-body - This slot is for passing the content before the body
  * @slot body - This slot is for passing the text content for the card
@@ -26,6 +23,13 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
  * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
  *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It fires the click event when enter key is used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It fires the click event when space key is used.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ *
  * @csspart header - The header part of the card
  * @csspart icon - The icon part of the card header
  * @csspart body - The body part of the card

package/dist/react/cardbutton/index.js

@@ -5,21 +5,18 @@ import { TAG_NAME } from '../../components/cardbutton/cardbutton.constants';
 /**
  * cardbutton component looks like a card and behaves as a button component.
  *
- * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.
- * Make sure to pass only non-interactable elements within the slots.
+ * ## Features
+ * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).
+ * - Interacting anywhere on the card triggers the click event.
+ * - Use `name` and `value` attributes when using within forms.
+ *
+ * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.
  *
  * @tagname mdc-cardbutton
  *
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @event click - (React: onClick) Event that gets dispatched when the card is clicked.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
- * It fires the click event when enter key is used.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
- * It fires the click event when space key is used.
- * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- *
  * @slot image - This slot is for overriding the image content of the card
  * @slot before-body - This slot is for passing the content before the body
  * @slot body - This slot is for passing the text content for the card
@@ -27,6 +24,13 @@ import { TAG_NAME } from '../../components/cardbutton/cardbutton.constants';
  * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
  * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
  *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It fires the click event when enter key is used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It fires the click event when space key is used.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ *
  * @csspart header - The header part of the card
  * @csspart icon - The icon part of the card header
  * @csspart body - The body part of the card

package/dist/react/cardcheckbox/index.d.ts

@@ -2,15 +2,19 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/cardcheckbox';
 import type { Events } from '../../components/cardcheckbox/cardcheckbox.types';
 /**
- * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.
+ * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction.
+ * Multiple cards can be checked simultaneously.
  *
- * While using this component within a form or group of cards, make sure cards are in a role = "checkbox-group".
- * This card would have events for selected and unselected (similar to checkbox)
+ * ## Features
+ * - Supports two orientations (vertical and horizontal), three visual variants (border, ghost, and promotional), and two selection types (check icon or checkbox component).
+ * - Interacting anywhere on the card toggles the checked state and dispatches a `change` event.
+ * - Card has `role="checkbox"` and manages `aria-checked` and `aria-disabled` attributes automatically.
  *
- * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.
- * Make sure to pass only non-interactable elements within the slots.
+ * ## Usage
+ * - The `card-title` attribute is required.
+ * - When using within a form or group, wrap cards in a container with `role="group"` and provide an `aria-label`.
  *
- * Make sure to pass the `card-title` mandatorily for this card.
+ * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.
  *
  * @tagname mdc-cardcheckbox
  *
@@ -24,6 +28,14 @@ import type { Events } from '../../components/cardcheckbox/cardcheckbox.types';
  * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
  * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
  *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It toggles the checked state when enter key is used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It toggles the checked state when space key is used.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
+ *
  * @csspart header - The header part of the card
  * @csspart icon - The icon part of the card header
  * @csspart body - The body part of the card
@@ -39,14 +51,6 @@ import type { Events } from '../../components/cardcheckbox/cardcheckbox.types';
  * @csspart check-icon-button - The check icon button part of the card
  *
  * @cssproperty --mdc-card-width - The width of the card
- *
- * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
- * It toggles the checked state when enter key is used.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
- * It toggles the checked state when space key is used.
- * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChange: EventName<Events["onChangeEvent"]>;

package/dist/react/cardcheckbox/index.js

@@ -3,15 +3,19 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/cardcheckbox';
 import { TAG_NAME } from '../../components/cardcheckbox/cardcheckbox.constants';
 /**
- * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.
+ * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction.
+ * Multiple cards can be checked simultaneously.
  *
- * While using this component within a form or group of cards, make sure cards are in a role = "checkbox-group".
- * This card would have events for selected and unselected (similar to checkbox)
+ * ## Features
+ * - Supports two orientations (vertical and horizontal), three visual variants (border, ghost, and promotional), and two selection types (check icon or checkbox component).
+ * - Interacting anywhere on the card toggles the checked state and dispatches a `change` event.
+ * - Card has `role="checkbox"` and manages `aria-checked` and `aria-disabled` attributes automatically.
  *
- * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.
- * Make sure to pass only non-interactable elements within the slots.
+ * ## Usage
+ * - The `card-title` attribute is required.
+ * - When using within a form or group, wrap cards in a container with `role="group"` and provide an `aria-label`.
  *
- * Make sure to pass the `card-title` mandatorily for this card.
+ * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.
  *
  * @tagname mdc-cardcheckbox
  *
@@ -25,6 +29,14 @@ import { TAG_NAME } from '../../components/cardcheckbox/cardcheckbox.constants';
  * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
  * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
  *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It toggles the checked state when enter key is used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It toggles the checked state when space key is used.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
+ *
  * @csspart header - The header part of the card
  * @csspart icon - The icon part of the card header
  * @csspart body - The body part of the card
@@ -40,14 +52,6 @@ import { TAG_NAME } from '../../components/cardcheckbox/cardcheckbox.constants';
  * @csspart check-icon-button - The check icon button part of the card
  *
  * @cssproperty --mdc-card-width - The width of the card
- *
- * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
- * It toggles the checked state when enter key is used.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
- * It toggles the checked state when space key is used.
- * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/react/cardradio/index.d.ts

@@ -2,15 +2,20 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/cardradio';
 import type { Events } from '../../components/cardradio/cardradio.types';
 /**
- * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.
+ * cardradio component extends `mdc-card` and supports radio selection interaction.
+ * Only one card can be selected at a time within the same group (defined by `name` attribute).
  *
- * While using this component within a form or group of cards, make sure cards are in a role = "radio-group".
- * This card would have events for selected and unselected (similar to radio)
+ * ## Features
+ * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).
+ * - Selecting a card automatically unselects other cards in the same group and dispatches a `change` event.
+ * - Supports keyboard navigation with arrow keys to move between cards in the same group.
+ * - Card has `role="radio"` and manages `aria-checked` and `aria-disabled` attributes automatically.
  *
- * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.
- * Make sure to pass only non-interactable elements within the slots.
+ * ## Usage
+ * - Both `card-title` and `name` attributes are required.
+ * - When using within a form or group, wrap cards in a container with `role="radiogroup"` and provide an `aria-label`.
  *
- * Make sure to pass the `card-title` mandatorily for this card.
+ * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.
  *
  * @tagname mdc-cardradio
  *
@@ -24,6 +29,14 @@ import type { Events } from '../../components/cardradio/cardradio.types';
  * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
  * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
  *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It selects the card and unselects others in the same group.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It selects the card when enter key or arrow keys are used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It selects the card when space key is used.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
+ *
  * @csspart header - The header part of the card
  * @csspart icon - The icon part of the card header
  * @csspart body - The body part of the card
@@ -39,14 +52,6 @@ import type { Events } from '../../components/cardradio/cardradio.types';
  * @csspart check-icon-button - The check icon button part of the card
  *
  * @cssproperty --mdc-card-width - The width of the card
- *
- * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
- * It toggles the checked state when enter key is used.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
- * It toggles the checked state when space key is used.
- * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChange: EventName<Events["onChangeEvent"]>;

package/dist/react/cardradio/index.js

@@ -3,15 +3,20 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/cardradio';
 import { TAG_NAME } from '../../components/cardradio/cardradio.constants';
 /**
- * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.
+ * cardradio component extends `mdc-card` and supports radio selection interaction.
+ * Only one card can be selected at a time within the same group (defined by `name` attribute).
  *
- * While using this component within a form or group of cards, make sure cards are in a role = "radio-group".
- * This card would have events for selected and unselected (similar to radio)
+ * ## Features
+ * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).
+ * - Selecting a card automatically unselects other cards in the same group and dispatches a `change` event.
+ * - Supports keyboard navigation with arrow keys to move between cards in the same group.
+ * - Card has `role="radio"` and manages `aria-checked` and `aria-disabled` attributes automatically.
  *
- * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.
- * Make sure to pass only non-interactable elements within the slots.
+ * ## Usage
+ * - Both `card-title` and `name` attributes are required.
+ * - When using within a form or group, wrap cards in a container with `role="radiogroup"` and provide an `aria-label`.
  *
- * Make sure to pass the `card-title` mandatorily for this card.
+ * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.
  *
  * @tagname mdc-cardradio
  *
@@ -25,6 +30,14 @@ import { TAG_NAME } from '../../components/cardradio/cardradio.constants';
  * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
  * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
  *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It selects the card and unselects others in the same group.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It selects the card when enter key or arrow keys are used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It selects the card when space key is used.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
+ *
  * @csspart header - The header part of the card
  * @csspart icon - The icon part of the card header
  * @csspart body - The body part of the card
@@ -40,14 +53,6 @@ import { TAG_NAME } from '../../components/cardradio/cardradio.constants';
  * @csspart check-icon-button - The check icon button part of the card
  *
  * @cssproperty --mdc-card-width - The width of the card
- *
- * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
- * It toggles the checked state when enter key is used.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
- * It toggles the checked state when space key is used.
- * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/react/statictoggle/index.d.ts

@@ -1,27 +1,25 @@
 import Component from '../../components/statictoggle';
 /**
- * This is a decorative component that is styled to look as a toggle. <br/>
- * It has 5 properties - checked, size, disabled, readonly and soft-disabled. <br/>
- * We are using the same styling that has been created for the `mdc-toggle` component.
+ * The StaticToggle is a decorative component that visually represents a toggle switch without interactive functionality.
+ * It is primarily used for display purposes or as a building block within custom interactive components.
+ * This component shares the same visual styling as the interactive `mdc-toggle` component.
  *
  * @dependency mdc-icon
  *
  * @tagname mdc-statictoggle
  *
- * @slot default - This is a default/unnamed slot
+ * @slot - Default slot for slotted content (typically used by parent `mdc-toggle` for the checkbox input).
  *
- * @cssproperty --mdc-toggle-width - The width of the toggle
- * @cssproperty --mdc-toggle-height - The height of the toggle
- * @cssproperty --mdc-toggle-border-radius - The border radius of the toggle
- * @cssproperty --mdc-toggle-border-color - The border color of the toggle
- * @cssproperty --mdc-toggle-background-color - The background color of the toggle
- * @cssproperty --mdc-toggle-icon-color - The icon color of the toggle
- * @cssproperty --mdc-toggle-icon-background-color - The icon background color of the toggle
+ * @cssproperty --mdc-statictoggle-width - The width of the static toggle.
+ * @cssproperty --mdc-statictoggle-height - The height of the static toggle.
+ * @cssproperty --mdc-statictoggle-border-radius - The border radius of the static toggle.
+ * @cssproperty --mdc-statictoggle-border-color - The border color of the static toggle.
+ * @cssproperty --mdc-statictoggle-background-color - The background color of the static toggle.
+ * @cssproperty --mdc-statictoggle-icon-color - The icon color of the static toggle.
+ * @cssproperty --mdc-statictoggle-icon-background-color - The icon background color of the static toggle.
  *
- * @csspart slider - The slider part of the toggle
- * @csspart toggle-icon - The icon part of the toggle
- *
- * @slot - Default slot for adding label text.
+ * @csspart slider - The slider part of the toggle.
+ * @csspart toggle-icon - The icon part of the toggle.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/statictoggle/index.js

@@ -3,28 +3,26 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/statictoggle';
 import { TAG_NAME } from '../../components/statictoggle/statictoggle.constants';
 /**
- * This is a decorative component that is styled to look as a toggle. <br/>
- * It has 5 properties - checked, size, disabled, readonly and soft-disabled. <br/>
- * We are using the same styling that has been created for the `mdc-toggle` component.
+ * The StaticToggle is a decorative component that visually represents a toggle switch without interactive functionality.
+ * It is primarily used for display purposes or as a building block within custom interactive components.
+ * This component shares the same visual styling as the interactive `mdc-toggle` component.
  *
  * @dependency mdc-icon
  *
  * @tagname mdc-statictoggle
  *
- * @slot default - This is a default/unnamed slot
+ * @slot - Default slot for slotted content (typically used by parent `mdc-toggle` for the checkbox input).
  *
- * @cssproperty --mdc-toggle-width - The width of the toggle
- * @cssproperty --mdc-toggle-height - The height of the toggle
- * @cssproperty --mdc-toggle-border-radius - The border radius of the toggle
- * @cssproperty --mdc-toggle-border-color - The border color of the toggle
- * @cssproperty --mdc-toggle-background-color - The background color of the toggle
- * @cssproperty --mdc-toggle-icon-color - The icon color of the toggle
- * @cssproperty --mdc-toggle-icon-background-color - The icon background color of the toggle
+ * @cssproperty --mdc-statictoggle-width - The width of the static toggle.
+ * @cssproperty --mdc-statictoggle-height - The height of the static toggle.
+ * @cssproperty --mdc-statictoggle-border-radius - The border radius of the static toggle.
+ * @cssproperty --mdc-statictoggle-border-color - The border color of the static toggle.
+ * @cssproperty --mdc-statictoggle-background-color - The background color of the static toggle.
+ * @cssproperty --mdc-statictoggle-icon-color - The icon color of the static toggle.
+ * @cssproperty --mdc-statictoggle-icon-background-color - The icon background color of the static toggle.
  *
- * @csspart slider - The slider part of the toggle
- * @csspart toggle-icon - The icon part of the toggle
- *
- * @slot - Default slot for adding label text.
+ * @csspart slider - The slider part of the toggle.
+ * @csspart toggle-icon - The icon part of the toggle.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/react/toggle/index.d.ts

@@ -2,14 +2,25 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/toggle';
 import type { Events } from '../../components/toggle/toggle.types';
 /**
- * Toggle Component is an interactive control used to switch between two mutually exclusive options,
- * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections
+ * The Toggle component is an interactive control used to switch between two mutually exclusive states,
+ * such as On/Off or Active/Inactive. It is commonly used in settings panels, forms, and preference selections
  * where users need to enable or disable a feature.
- * It contains an optional label and an optional helper text.
  *
- * To create a group of toggles, use the FormFieldGroup component.
+ * To create a group of toggles, use the `mdc-formfieldgroup` component.
  *
- * Note: It internally renders a checkbox styled as a toggle switch.
+ * **Note:** This component internally renders a native checkbox input element styled as a toggle switch.
+ *
+ * ## When to use
+ * Use toggles for binary choices where the change takes effect immediately, such as enabling/disabling settings or features.
+ *
+ * ## Accessibility
+ * - Provide clear labels that describe what the toggle controls
+ * - Use `data-aria-label` when a visual label is not present
+ * - Keyboard navigation: Space to toggle, Tab to navigate, Enter to submit form
+ *
+ * ## Styling
+ * Use the `static-toggle` part to apply custom styles to the toggle switch visual element.
+ * This part exposes the underlying [StaticToggle](?path=/docs/components-decorator-statictoggle--docs) component for advanced styling.
  *
  * @dependency mdc-button
  * @dependency mdc-icon
@@ -22,14 +33,6 @@ import type { Events } from '../../components/toggle/toggle.types';
  * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.
  *
- * @cssproperty --mdc-toggle-width - The width of the toggle
- * @cssproperty --mdc-toggle-height - The height of the toggle
- * @cssproperty --mdc-toggle-border-radius - The border radius of the toggle
- * @cssproperty --mdc-toggle-border-color - The border color of the toggle
- * @cssproperty --mdc-toggle-background-color - The background color of the toggle
- * @cssproperty --mdc-toggle-icon-color - The icon color of the toggle
- * @cssproperty --mdc-toggle-icon-background-color - The icon background color of the toggle
- *
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
  * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
@@ -38,8 +41,8 @@ import type { Events } from '../../components/toggle/toggle.types';
  * @csspart help-text - The helper/validation text element.
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
- * @csspart static-toggle - The static-toggle element that wraps the toggle input.
- * @csspart toggle-input - The native checkbox input element styled as a toggle switch.
+ * @csspart static-toggle - The statictoggle that provides the visual toggle switch appearance.
+ * @csspart toggle-input - The native checkbox input element that provides the interactive functionality.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChange: EventName<Events["onChangeEvent"]>;