@momentum-design/components 0.129.36 → 0.129.38

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

@@ -1,14 +1,24 @@
 import Component from '../../components/bullet';
 /**
- * Bullet component, which is a visual marker
- * and be used to organize and present items in a list format.
+ * The Bullet component displays a small circular visual indicator used to organize and present
+ * items in a list format. It provides a simple, consistent way to mark list items or emphasize
+ * content points.
+ *
+ * Bullets are available in three sizes (small, medium, large) to accommodate different layout
+ * densities and visual hierarchies.
+ *
+ * ## When to use
+ * Use bullets to create unordered lists, mark navigation items, or provide visual indicators
+ * for list content. Choose bullet size based on content importance and layout density.
+ *
+ * ## Accessibility
+ * - Bullets are purely decorative and should be used alongside meaningful text content
+ * - Do not rely solely on bullet size or color to convey information
  *
  * @tagname mdc-bullet
  *
- * @cssproperty --mdc-bullet-background-color - background color of the bullet
- * @cssproperty --mdc-bullet-size-small - small size value of the bullet
- * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet
- * @cssproperty --mdc-bullet-size-large - large size value of the bullet
+ * @cssproperty --mdc-bullet-background-color - Background color of the bullet.
+ * @cssproperty --mdc-bullet-size - Height of the bullet.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/bullet/index.js

@@ -3,15 +3,25 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/bullet';
 import { TAG_NAME } from '../../components/bullet/bullet.constants';
 /**
- * Bullet component, which is a visual marker
- * and be used to organize and present items in a list format.
+ * The Bullet component displays a small circular visual indicator used to organize and present
+ * items in a list format. It provides a simple, consistent way to mark list items or emphasize
+ * content points.
+ *
+ * Bullets are available in three sizes (small, medium, large) to accommodate different layout
+ * densities and visual hierarchies.
+ *
+ * ## When to use
+ * Use bullets to create unordered lists, mark navigation items, or provide visual indicators
+ * for list content. Choose bullet size based on content importance and layout density.
+ *
+ * ## Accessibility
+ * - Bullets are purely decorative and should be used alongside meaningful text content
+ * - Do not rely solely on bullet size or color to convey information
  *
  * @tagname mdc-bullet
  *
- * @cssproperty --mdc-bullet-background-color - background color of the bullet
- * @cssproperty --mdc-bullet-size-small - small size value of the bullet
- * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet
- * @cssproperty --mdc-bullet-size-large - large size value of the bullet
+ * @cssproperty --mdc-bullet-background-color - Background color of the bullet.
+ * @cssproperty --mdc-bullet-size - Height of the bullet.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -1,50 +1,45 @@
 import Component from '../../components/divider';
 /**
- * `mdc-divider` is a component that provides a line to separate and organize content.
- * It can also include a button or text positioned centrally, allowing users to interact with the layout.
+ * The Divider component provides a visual line to separate and organize content within layouts.
+ * It supports both horizontal and vertical orientations with solid or gradient styles, and can
+ * optionally include centered text labels or interactive grabber buttons.
  *
- * **Divider Orientation:**
- * - **Horizontal**: A thin, horizontal line.
- * - **Vertical**: A thin, vertical line.
+ * The divider automatically infers its type based on the content in its slot:
+ * - **Primary**: Simple line with no content
+ * - **Text**: Horizontal line with centered text label
+ * - **Grabber Button**: Line with centered interactive button
  *
- * **Divider Variants:**
- * - **solid**: Solid line.
- * - **gradient**: Gradient Line.
+ * **Note:**
+ * - Vertical text dividers are not currently supported.
+ * - If the slot contains invalid tag names or multiple elements, the divider defaults to the Primary type
+ * - Use the provided CSS custom properties to customize divider styles
  *
- * **Divider Types:**
- * - The type of divider is inferred based on the kind of slot present.
- *  - **Primary**: A simple horizontal or vertical divider.
- *  - **Text**: A horizontal divider with a text label in the center.
- *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.
+ * ## When to use
+ * Use dividers to create visual separation between content sections, list items, or layout regions.
+ * Add text labels to provide context, or grabber buttons to create resizable panes.
  *
- * **Accessibility:**
- * - When the slot is replaced by an `mdc-button`:
- *   - `aria-label` should be passed to the `mdc-button`.
- *   - `aria-expanded` should be passed to the `mdc-button`.
- *
- * **Notes:**
- * - If the slot is replaced by an invalid tag name or contains multiple elements,
- *   the divider defaults to the **Primary** type.
- * - To override the styles of the divider, use the provided CSS custom properties.
+ * ## Accessibility
+ * - When using a grabber button, provide `aria-label` to describe its purpose
+ * - Set `aria-expanded` on the button to indicate the current state of resizable sections
+ * - Ensure sufficient color contrast for the divider line
  *
  * @tagname mdc-divider
  *
- * @cssproperty --mdc-divider-background-color - background color of the divider
- * @cssproperty --mdc-divider-width - width of the divider
- * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider
- * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider
- * @cssproperty --mdc-divider-text-size - font size of label in the text divider
- * @cssproperty --mdc-divider-text-color - font color of label in the text divider
- * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider
- * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider
- * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button
- *  in rest state
- * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button
- *  in hover state
- * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button
- *  in pressed state
- * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button
- * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
+ * @cssproperty --mdc-divider-background-color - Background color of the divider line.
+ * @cssproperty --mdc-divider-width - Width (thickness) of the divider line.
+ * @cssproperty --mdc-divider-horizontal-gradient - Gradient for horizontal dividers.
+ * @cssproperty --mdc-divider-vertical-gradient - Gradient for vertical dividers.
+ * @cssproperty --mdc-divider-text-size - Font size of the text label in text dividers.
+ * @cssproperty --mdc-divider-text-color - Font color of the text label in text dividers.
+ * @cssproperty --mdc-divider-text-margin - Left and right margin of the text label.
+ * @cssproperty --mdc-divider-text-line-height - Line height of the text label.
+ * @cssproperty --mdc-divider-grabber-button-background-color-normal - Background color of the grabber button in rest state.
+ * @cssproperty --mdc-divider-grabber-button-background-color-hover - Background color of the grabber button in hover state.
+ * @cssproperty --mdc-divider-grabber-button-background-color-pressed - Background color of the grabber button in pressed state.
+ * @cssproperty --mdc-divider-grabber-button-border-color - Border color of the grabber button.
+ * @cssproperty --mdc-divider-grabber-button-border-radius - Border radius of the grabber button.
+ *
+ * @slot - Content for the divider. Use `mdc-text` for text labels or `mdc-button` for grabber buttons.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/divider/index.js

@@ -3,51 +3,46 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/divider';
 import { TAG_NAME } from '../../components/divider/divider.constants';
 /**
- * `mdc-divider` is a component that provides a line to separate and organize content.
- * It can also include a button or text positioned centrally, allowing users to interact with the layout.
+ * The Divider component provides a visual line to separate and organize content within layouts.
+ * It supports both horizontal and vertical orientations with solid or gradient styles, and can
+ * optionally include centered text labels or interactive grabber buttons.
  *
- * **Divider Orientation:**
- * - **Horizontal**: A thin, horizontal line.
- * - **Vertical**: A thin, vertical line.
+ * The divider automatically infers its type based on the content in its slot:
+ * - **Primary**: Simple line with no content
+ * - **Text**: Horizontal line with centered text label
+ * - **Grabber Button**: Line with centered interactive button
  *
- * **Divider Variants:**
- * - **solid**: Solid line.
- * - **gradient**: Gradient Line.
+ * **Note:**
+ * - Vertical text dividers are not currently supported.
+ * - If the slot contains invalid tag names or multiple elements, the divider defaults to the Primary type
+ * - Use the provided CSS custom properties to customize divider styles
  *
- * **Divider Types:**
- * - The type of divider is inferred based on the kind of slot present.
- *  - **Primary**: A simple horizontal or vertical divider.
- *  - **Text**: A horizontal divider with a text label in the center.
- *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.
+ * ## When to use
+ * Use dividers to create visual separation between content sections, list items, or layout regions.
+ * Add text labels to provide context, or grabber buttons to create resizable panes.
  *
- * **Accessibility:**
- * - When the slot is replaced by an `mdc-button`:
- *   - `aria-label` should be passed to the `mdc-button`.
- *   - `aria-expanded` should be passed to the `mdc-button`.
- *
- * **Notes:**
- * - If the slot is replaced by an invalid tag name or contains multiple elements,
- *   the divider defaults to the **Primary** type.
- * - To override the styles of the divider, use the provided CSS custom properties.
+ * ## Accessibility
+ * - When using a grabber button, provide `aria-label` to describe its purpose
+ * - Set `aria-expanded` on the button to indicate the current state of resizable sections
+ * - Ensure sufficient color contrast for the divider line
  *
  * @tagname mdc-divider
  *
- * @cssproperty --mdc-divider-background-color - background color of the divider
- * @cssproperty --mdc-divider-width - width of the divider
- * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider
- * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider
- * @cssproperty --mdc-divider-text-size - font size of label in the text divider
- * @cssproperty --mdc-divider-text-color - font color of label in the text divider
- * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider
- * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider
- * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button
- *  in rest state
- * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button
- *  in hover state
- * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button
- *  in pressed state
- * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button
- * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
+ * @cssproperty --mdc-divider-background-color - Background color of the divider line.
+ * @cssproperty --mdc-divider-width - Width (thickness) of the divider line.
+ * @cssproperty --mdc-divider-horizontal-gradient - Gradient for horizontal dividers.
+ * @cssproperty --mdc-divider-vertical-gradient - Gradient for vertical dividers.
+ * @cssproperty --mdc-divider-text-size - Font size of the text label in text dividers.
+ * @cssproperty --mdc-divider-text-color - Font color of the text label in text dividers.
+ * @cssproperty --mdc-divider-text-margin - Left and right margin of the text label.
+ * @cssproperty --mdc-divider-text-line-height - Line height of the text label.
+ * @cssproperty --mdc-divider-grabber-button-background-color-normal - Background color of the grabber button in rest state.
+ * @cssproperty --mdc-divider-grabber-button-background-color-hover - Background color of the grabber button in hover state.
+ * @cssproperty --mdc-divider-grabber-button-background-color-pressed - Background color of the grabber button in pressed state.
+ * @cssproperty --mdc-divider-grabber-button-border-color - Border color of the grabber button.
+ * @cssproperty --mdc-divider-grabber-button-border-radius - Border radius of the grabber button.
+ *
+ * @slot - Content for the divider. Use `mdc-text` for text labels or `mdc-button` for grabber buttons.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -1,21 +1,26 @@
 import Component from '../../components/marker';
 /**
- * `mdc-marker`, which is a vertical line and
- * used to draw attention to specific parts of
- * the content or to signify important information.
+ * The Marker component displays a vertical line (0.25rem wide) used to draw attention to specific content
+ * or signify important information. It provides visual emphasis through color and pattern variations.
  *
- * **Marker Variants**:
- * - **solid**: Solid marker.
- * - **striped**: Striped marker.
+ * Markers are commonly used alongside list items, cards, or content blocks to indicate status,
+ * priority, or categorization.
+ *
+ * ## When to use
+ * Use markers to highlight important content, indicate status or priority levels, or provide
+ * visual categorization in lists and layouts.
+ *
+ * ## Accessibility
+ * - Markers are purely decorative and should not convey information solely through color
+ * - Always pair markers with text labels or other indicators to convey meaning
+ * - Ensure sufficient color contrast for visibility
  *
  * @tagname mdc-marker
  *
- * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color
- * in solid variant.
- * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.
- * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color
- * in striped variant.
- * @cssproperty --mdc-marker-width - Allows customization of the default width.
+ * @cssproperty --mdc-marker-solid-background-color - Background color for solid variant markers.
+ * @cssproperty --mdc-marker-striped-color - Stripe color for striped variant markers.
+ * @cssproperty --mdc-marker-striped-background-color - Background color for striped variant markers.
+ * @cssproperty --mdc-marker-width - Width (thickness) of the marker line.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/marker/index.js

@@ -3,22 +3,27 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/marker';
 import { TAG_NAME } from '../../components/marker/marker.constants';
 /**
- * `mdc-marker`, which is a vertical line and
- * used to draw attention to specific parts of
- * the content or to signify important information.
+ * The Marker component displays a vertical line (0.25rem wide) used to draw attention to specific content
+ * or signify important information. It provides visual emphasis through color and pattern variations.
  *
- * **Marker Variants**:
- * - **solid**: Solid marker.
- * - **striped**: Striped marker.
+ * Markers are commonly used alongside list items, cards, or content blocks to indicate status,
+ * priority, or categorization.
+ *
+ * ## When to use
+ * Use markers to highlight important content, indicate status or priority levels, or provide
+ * visual categorization in lists and layouts.
+ *
+ * ## Accessibility
+ * - Markers are purely decorative and should not convey information solely through color
+ * - Always pair markers with text labels or other indicators to convey meaning
+ * - Ensure sufficient color contrast for visibility
  *
  * @tagname mdc-marker
  *
- * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color
- * in solid variant.
- * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.
- * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color
- * in striped variant.
- * @cssproperty --mdc-marker-width - Allows customization of the default width.
+ * @cssproperty --mdc-marker-solid-background-color - Background color for solid variant markers.
+ * @cssproperty --mdc-marker-striped-color - Stripe color for striped variant markers.
+ * @cssproperty --mdc-marker-striped-background-color - Background color for striped variant markers.
+ * @cssproperty --mdc-marker-width - Width (thickness) of the marker line.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -1,24 +1,35 @@
 import Component from '../../components/staticcheckbox';
 /**
- * StaticCheckbox is a decorative component styled as a checkbox for visual presentation.
- * Unlike the interactive `mdc-checkbox`, this component does not handle user interactions or form submissions.
- * It is used purely for displaying checkbox states in read-only scenarios.
+ * The StaticCheckbox component is a decorative, non-interactive checkbox used for visual
+ * presentation in read-only scenarios. Unlike the interactive `mdc-checkbox`, it does not
+ * handle user interactions or form submissions.
  *
- * This component supports five display states: checked, indeterminate, disabled, readonly, and soft-disabled.
+ * This component supports multiple visual states: checked, indeterminate, disabled, readonly,
+ * and soft-disabled.
+ *
+ * ## When to use
+ * Use StaticCheckbox to display checkbox states in read-only contexts such as summary views,
+ * confirmation screens, or when showing historical form data. For interactive checkboxes, use
+ * `mdc-checkbox` instead.
+ *
+ * ## Accessibility
+ * - StaticCheckbox is decorative and non-interactive by design
+ * - Always pair with descriptive text labels in the default slot
+ * - Do not use this as a replacement for interactive checkboxes in forms
  *
  * @tagname mdc-staticcheckbox
  *
  * @dependency mdc-icon
  *
- * @cssproperty --mdc-staticcheckbox-border-color - The border color of the checkbox.
- * @cssproperty --mdc-staticcheckbox-background-color - The background color of the checkbox.
- * @cssproperty --mdc-staticcheckbox-icon-color - The icon color of the checkbox.
- * @cssproperty --mdc-staticcheckbox-size - The size of the checkbox.
+ * @cssproperty --mdc-staticcheckbox-border-color - Border color of the checkbox.
+ * @cssproperty --mdc-staticcheckbox-background-color - Background color of the checkbox.
+ * @cssproperty --mdc-staticcheckbox-icon-color - Icon color of the checkbox.
+ * @cssproperty --mdc-staticcheckbox-size - Size of the checkbox.
  *
- * @csspart icon-container - The container for the checkbox icon
- * @csspart checkbox-icon - The checkbox icon element
+ * @csspart icon-container - The container for the checkbox icon.
+ * @csspart checkbox-icon - The checkbox icon element.
  *
- * @slot - Default slot for adding label text
+ * @slot - Default slot for label text.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/staticcheckbox/index.js

@@ -3,25 +3,36 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/staticcheckbox';
 import { TAG_NAME } from '../../components/staticcheckbox/staticcheckbox.constants';
 /**
- * StaticCheckbox is a decorative component styled as a checkbox for visual presentation.
- * Unlike the interactive `mdc-checkbox`, this component does not handle user interactions or form submissions.
- * It is used purely for displaying checkbox states in read-only scenarios.
+ * The StaticCheckbox component is a decorative, non-interactive checkbox used for visual
+ * presentation in read-only scenarios. Unlike the interactive `mdc-checkbox`, it does not
+ * handle user interactions or form submissions.
  *
- * This component supports five display states: checked, indeterminate, disabled, readonly, and soft-disabled.
+ * This component supports multiple visual states: checked, indeterminate, disabled, readonly,
+ * and soft-disabled.
+ *
+ * ## When to use
+ * Use StaticCheckbox to display checkbox states in read-only contexts such as summary views,
+ * confirmation screens, or when showing historical form data. For interactive checkboxes, use
+ * `mdc-checkbox` instead.
+ *
+ * ## Accessibility
+ * - StaticCheckbox is decorative and non-interactive by design
+ * - Always pair with descriptive text labels in the default slot
+ * - Do not use this as a replacement for interactive checkboxes in forms
  *
  * @tagname mdc-staticcheckbox
  *
  * @dependency mdc-icon
  *
- * @cssproperty --mdc-staticcheckbox-border-color - The border color of the checkbox.
- * @cssproperty --mdc-staticcheckbox-background-color - The background color of the checkbox.
- * @cssproperty --mdc-staticcheckbox-icon-color - The icon color of the checkbox.
- * @cssproperty --mdc-staticcheckbox-size - The size of the checkbox.
+ * @cssproperty --mdc-staticcheckbox-border-color - Border color of the checkbox.
+ * @cssproperty --mdc-staticcheckbox-background-color - Background color of the checkbox.
+ * @cssproperty --mdc-staticcheckbox-icon-color - Icon color of the checkbox.
+ * @cssproperty --mdc-staticcheckbox-size - Size of the checkbox.
  *
- * @csspart icon-container - The container for the checkbox icon
- * @csspart checkbox-icon - The checkbox icon element
+ * @csspart icon-container - The container for the checkbox icon.
+ * @csspart checkbox-icon - The checkbox icon element.
  *
- * @slot - Default slot for adding label text
+ * @slot - Default slot for label text.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -1,22 +1,32 @@
 import Component from '../../components/staticradio';
 /**
- * StaticRadio is a decorative component styled as a radio button for visual presentation.
- * Unlike the interactive `mdc-radio`, this component does not handle user interactions or form submissions.
- * It is used purely for displaying radio button states in read-only scenarios.
+ * The StaticRadio component is a decorative, non-interactive radio button used for visual
+ * presentation in read-only scenarios. Unlike the interactive `mdc-radio`, it does not
+ * handle user interactions or form submissions.
  *
- * This component supports four display states: checked, disabled, readonly, and soft-disabled.
+ * This component supports multiple visual states: checked, disabled, readonly, and soft-disabled.
+ *
+ * ## When to use
+ * Use StaticRadio to display radio button states in read-only contexts such as summary views,
+ * confirmation screens, or when showing historical form data. For interactive radio buttons, use
+ * `mdc-radio` instead.
+ *
+ * ## Accessibility
+ * - StaticRadio is decorative and non-interactive by design
+ * - Always pair with descriptive text labels in the default slot
+ * - Do not use this as a replacement for interactive radio buttons in forms
  *
  * @tagname mdc-staticradio
  *
- * @cssproperty --mdc-staticradio-inner-circle-size - The size of the inner circle when checked.
- * @cssproperty --mdc-staticradio-outer-circle-size - The size of the outer circle border.
- * @cssproperty --mdc-staticradio-inner-circle-background-color - The background color of the inner circle when checked.
- * @cssproperty --mdc-staticradio-outer-circle-border-color - The border color of the outer circle.
- * @cssproperty --mdc-staticradio-outer-circle-background-color - The background color of the outer circle.
+ * @cssproperty --mdc-staticradio-inner-circle-size - Size of the inner circle when checked.
+ * @cssproperty --mdc-staticradio-outer-circle-size - Size of the outer circle border.
+ * @cssproperty --mdc-staticradio-inner-circle-background-color - Background color of the inner circle when checked.
+ * @cssproperty --mdc-staticradio-outer-circle-border-color - Border color of the outer circle.
+ * @cssproperty --mdc-staticradio-outer-circle-background-color - Background color of the outer circle.
  *
- * @csspart radio-icon - The radio icon element
+ * @csspart radio-icon - The radio icon element.
  *
- * @slot - Default slot for the label of the radio
+ * @slot - Default slot for the label of the radio.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/staticradio/index.js

@@ -3,23 +3,33 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/staticradio';
 import { TAG_NAME } from '../../components/staticradio/staticradio.constants';
 /**
- * StaticRadio is a decorative component styled as a radio button for visual presentation.
- * Unlike the interactive `mdc-radio`, this component does not handle user interactions or form submissions.
- * It is used purely for displaying radio button states in read-only scenarios.
+ * The StaticRadio component is a decorative, non-interactive radio button used for visual
+ * presentation in read-only scenarios. Unlike the interactive `mdc-radio`, it does not
+ * handle user interactions or form submissions.
  *
- * This component supports four display states: checked, disabled, readonly, and soft-disabled.
+ * This component supports multiple visual states: checked, disabled, readonly, and soft-disabled.
+ *
+ * ## When to use
+ * Use StaticRadio to display radio button states in read-only contexts such as summary views,
+ * confirmation screens, or when showing historical form data. For interactive radio buttons, use
+ * `mdc-radio` instead.
+ *
+ * ## Accessibility
+ * - StaticRadio is decorative and non-interactive by design
+ * - Always pair with descriptive text labels in the default slot
+ * - Do not use this as a replacement for interactive radio buttons in forms
  *
  * @tagname mdc-staticradio
  *
- * @cssproperty --mdc-staticradio-inner-circle-size - The size of the inner circle when checked.
- * @cssproperty --mdc-staticradio-outer-circle-size - The size of the outer circle border.
- * @cssproperty --mdc-staticradio-inner-circle-background-color - The background color of the inner circle when checked.
- * @cssproperty --mdc-staticradio-outer-circle-border-color - The border color of the outer circle.
- * @cssproperty --mdc-staticradio-outer-circle-background-color - The background color of the outer circle.
+ * @cssproperty --mdc-staticradio-inner-circle-size - Size of the inner circle when checked.
+ * @cssproperty --mdc-staticradio-outer-circle-size - Size of the outer circle border.
+ * @cssproperty --mdc-staticradio-inner-circle-background-color - Background color of the inner circle when checked.
+ * @cssproperty --mdc-staticradio-outer-circle-border-color - Border color of the outer circle.
+ * @cssproperty --mdc-staticradio-outer-circle-background-color - Background color of the outer circle.
  *
- * @csspart radio-icon - The radio icon element
+ * @csspart radio-icon - The radio icon element.
  *
- * @slot - Default slot for the label of the radio
+ * @slot - Default slot for the label of the radio.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -1,25 +1,38 @@
 import Component from '../../components/statictoggle';
 /**
- * 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.
+ * The StaticToggle component is a decorative, non-interactive toggle switch used for visual
+ * presentation. It shares the same styling as the interactive `mdc-toggle` component but does
+ * not provide user interaction functionality.
  *
- * @dependency mdc-icon
+ * This component supports multiple visual states: checked, disabled, readonly, soft-disabled,
+ * and size variations (default, compact).
+ *
+ * ## When to use
+ * Use StaticToggle to display toggle states in read-only contexts such as summary views,
+ * confirmation screens, or as a building block within custom interactive components. For
+ * interactive toggles, use `mdc-toggle` instead.
+ *
+ * ## Accessibility
+ * - StaticToggle is decorative and non-interactive by design
+ * - When used within parent components, ensure proper ARIA attributes are provided by the parent
+ * - Do not use this as a replacement for interactive toggles in forms
  *
  * @tagname mdc-statictoggle
  *
- * @slot - Default slot for slotted content (typically used by parent `mdc-toggle` for the checkbox input).
+ * @dependency mdc-icon
  *
- * @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.
+ * @cssproperty --mdc-statictoggle-width - Width of the static toggle.
+ * @cssproperty --mdc-statictoggle-height - Height of the static toggle.
+ * @cssproperty --mdc-statictoggle-border-radius - Border radius of the static toggle.
+ * @cssproperty --mdc-statictoggle-border-color - Border color of the static toggle.
+ * @cssproperty --mdc-statictoggle-background-color - Background color of the static toggle.
+ * @cssproperty --mdc-statictoggle-icon-color - Icon color of the static toggle.
+ * @cssproperty --mdc-statictoggle-icon-background-color - 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 slotted content (typically used by parent `mdc-toggle` for the checkbox input).
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/statictoggle/index.js

@@ -3,26 +3,39 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/statictoggle';
 import { TAG_NAME } from '../../components/statictoggle/statictoggle.constants';
 /**
- * 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.
+ * The StaticToggle component is a decorative, non-interactive toggle switch used for visual
+ * presentation. It shares the same styling as the interactive `mdc-toggle` component but does
+ * not provide user interaction functionality.
  *
- * @dependency mdc-icon
+ * This component supports multiple visual states: checked, disabled, readonly, soft-disabled,
+ * and size variations (default, compact).
+ *
+ * ## When to use
+ * Use StaticToggle to display toggle states in read-only contexts such as summary views,
+ * confirmation screens, or as a building block within custom interactive components. For
+ * interactive toggles, use `mdc-toggle` instead.
+ *
+ * ## Accessibility
+ * - StaticToggle is decorative and non-interactive by design
+ * - When used within parent components, ensure proper ARIA attributes are provided by the parent
+ * - Do not use this as a replacement for interactive toggles in forms
  *
  * @tagname mdc-statictoggle
  *
- * @slot - Default slot for slotted content (typically used by parent `mdc-toggle` for the checkbox input).
+ * @dependency mdc-icon
  *
- * @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.
+ * @cssproperty --mdc-statictoggle-width - Width of the static toggle.
+ * @cssproperty --mdc-statictoggle-height - Height of the static toggle.
+ * @cssproperty --mdc-statictoggle-border-radius - Border radius of the static toggle.
+ * @cssproperty --mdc-statictoggle-border-color - Border color of the static toggle.
+ * @cssproperty --mdc-statictoggle-background-color - Background color of the static toggle.
+ * @cssproperty --mdc-statictoggle-icon-color - Icon color of the static toggle.
+ * @cssproperty --mdc-statictoggle-icon-background-color - 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 slotted content (typically used by parent `mdc-toggle` for the checkbox input).
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,