@momentum-design/components 0.129.37 → 0.129.38

package/dist/components/bullet/bullet.component.d.ts

@@ -2,15 +2,25 @@ import type { CSSResult } from 'lit';
 import { Component } from '../../models';
 import type { Size } from './bullet.types';
 /**
- * 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 class Bullet extends Component {
     /**

package/dist/components/bullet/bullet.component.js

@@ -12,15 +12,25 @@ import { Component } from '../../models';
 import styles from './bullet.styles';
 import { SIZE } from './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.
  */
 class Bullet extends Component {
     constructor() {

package/dist/components/bullet/bullet.styles.js

@@ -2,23 +2,22 @@ import { css } from 'lit';
 const styles = css `
   :host {
     --mdc-bullet-background-color: var(--mds-color-theme-outline-secondary-normal);
-    --mdc-bullet-size-small: 0.25rem;
-    --mdc-bullet-size-medium: 0.5rem;
-    --mdc-bullet-size-large: 1rem;
+    --mdc-bullet-size: 0.25rem;
 
     border-radius: 50%;
     display: block;
     aspect-ratio: 1;
+    height: var(--mdc-bullet-size);
     background-color: var(--mdc-bullet-background-color);
   }
   :host([size='small']) {
-    height: var(--mdc-bullet-size-small);
+    --mdc-bullet-size: 0.25rem;
   }
   :host([size='medium']) {
-    height: var(--mdc-bullet-size-medium);
+    --mdc-bullet-size: 0.5rem;
   }
   :host([size='large']) {
-    height: var(--mdc-bullet-size-large);
+    --mdc-bullet-size: 1rem;
   }
 `;
 export default [styles];

package/dist/components/divider/divider.component.d.ts

@@ -3,85 +3,80 @@ import { CSSResult } from 'lit';
 import { Component } from '../../models';
 import type { Directions, DividerOrientation, DividerVariant } from './divider.types';
 /**
- * `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 class Divider extends Component {
     /**
-     * Two orientations of divider
-     * - **horizontal**: A thin, horizontal line with 0.0625rem width.
-     * - **vertical**: A thin, vertical line with 0.0625rem width.
+     * Determines the orientation of the divider line.
+     * - **horizontal**: A thin horizontal line
+     * - **vertical**: A thin vertical line
      *
-     * Note: We do not support "Vertical Text Divider" as of now.
+     * Note: Vertical text dividers are not currently supported.
      * @default horizontal
      */
     orientation: DividerOrientation;
     /**
-     * Two variants of divider
-     * - **solid**: Solid line.
-     * - **gradient**: Gradient Line that fades on either sides of the divider.
+     * Visual style of the divider line.
+     * - **solid**: Solid line with uniform color
+     * - **gradient**: Gradient line that fades on both ends
      * @default solid
      */
     variant: DividerVariant;
     /**
-     * Direction of the arrow icon, if applicable.
-     * - **positive**
-     * - **negative**
+     * Direction of the arrow icon displayed on the grabber button.
+     * - **positive**: Up arrow (horizontal) or right arrow (vertical)
+     * - **negative**: Down arrow (horizontal) or left arrow (vertical)
      *
-     * Note: Positive and Negative directions are defined based on Cartesian plane.
-     * @default 'negative'
+     * Only applies when using a grabber button. Directions follow the Cartesian coordinate system.
+     * @default negative
      */
     arrowDirection: Directions;
     /**
-     * Position of the button, if applicable.
-     * - **positive**
-     * - **negative**
+     * Position of the grabber button along the divider line.
+     * - **positive**: Right side (horizontal) or top side (vertical)
+     * - **negative**: Left side (horizontal) or bottom side (vertical)
      *
-     * Note: Positive and Negative directions are defined based on Cartesian plane.
-     * @default 'negative'
+     * Only applies when using a grabber button. Directions follow the Cartesian coordinate system.
+     * @default negative
      */
     buttonPosition: Directions;
     /**

package/dist/components/divider/divider.component.js

@@ -13,87 +13,82 @@ import { Component } from '../../models';
 import { ARROW_ICONS, BUTTON_TAG, DEFAULTS, DIRECTIONS, DIVIDER_ORIENTATION, DIVIDER_VARIANT, TEXT_TAG, } from './divider.constants';
 import styles from './divider.styles';
 /**
- * `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.
  */
 class Divider extends Component {
     constructor() {
         super(...arguments);
         /**
-         * Two orientations of divider
-         * - **horizontal**: A thin, horizontal line with 0.0625rem width.
-         * - **vertical**: A thin, vertical line with 0.0625rem width.
+         * Determines the orientation of the divider line.
+         * - **horizontal**: A thin horizontal line
+         * - **vertical**: A thin vertical line
          *
-         * Note: We do not support "Vertical Text Divider" as of now.
+         * Note: Vertical text dividers are not currently supported.
          * @default horizontal
          */
         this.orientation = DEFAULTS.ORIENTATION;
         /**
-         * Two variants of divider
-         * - **solid**: Solid line.
-         * - **gradient**: Gradient Line that fades on either sides of the divider.
+         * Visual style of the divider line.
+         * - **solid**: Solid line with uniform color
+         * - **gradient**: Gradient line that fades on both ends
          * @default solid
          */
         this.variant = DEFAULTS.VARIANT;
         /**
-         * Direction of the arrow icon, if applicable.
-         * - **positive**
-         * - **negative**
+         * Direction of the arrow icon displayed on the grabber button.
+         * - **positive**: Up arrow (horizontal) or right arrow (vertical)
+         * - **negative**: Down arrow (horizontal) or left arrow (vertical)
          *
-         * Note: Positive and Negative directions are defined based on Cartesian plane.
-         * @default 'negative'
+         * Only applies when using a grabber button. Directions follow the Cartesian coordinate system.
+         * @default negative
          */
         this.arrowDirection = DEFAULTS.ARROW_DIRECTION;
         /**
-         * Position of the button, if applicable.
-         * - **positive**
-         * - **negative**
+         * Position of the grabber button along the divider line.
+         * - **positive**: Right side (horizontal) or top side (vertical)
+         * - **negative**: Left side (horizontal) or bottom side (vertical)
          *
-         * Note: Positive and Negative directions are defined based on Cartesian plane.
-         * @default 'negative'
+         * Only applies when using a grabber button. Directions follow the Cartesian coordinate system.
+         * @default negative
          */
         this.buttonPosition = DEFAULTS.BUTTON_DIRECTION;
     }

package/dist/components/marker/marker.component.d.ts

@@ -2,28 +2,33 @@ import { CSSResult } from 'lit';
 import { Component } from '../../models';
 import type { MarkerVariants } from './marker.types';
 /**
- * `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 class Marker extends Component {
     /**
-     * There are two variants of markers, each with a width of 0.25rem:
-     * - **solid**: Solid marker.
-     * - **striped**: Striped marker.
+     * Visual style of the marker.
+     * - **solid**: Solid colored vertical line
+     * - **striped**: Vertical line with diagonal stripes pattern
      * @default solid
      */
     variant: MarkerVariants;

package/dist/components/marker/marker.component.js

@@ -12,30 +12,35 @@ import { Component } from '../../models';
 import styles from './marker.styles';
 import { MARKER_VARIANTS } from './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.
  */
 class Marker extends Component {
     constructor() {
         super(...arguments);
         /**
-         * There are two variants of markers, each with a width of 0.25rem:
-         * - **solid**: Solid marker.
-         * - **striped**: Striped marker.
+         * Visual style of the marker.
+         * - **solid**: Solid colored vertical line
+         * - **striped**: Vertical line with diagonal stripes pattern
          * @default solid
          */
         this.variant = MARKER_VARIANTS.SOLID;

package/dist/components/staticcheckbox/staticcheckbox.component.d.ts

@@ -2,25 +2,36 @@ import { CSSResult } from 'lit';
 import { Component } from '../../models';
 declare const StaticCheckbox_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
 /**
- * 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 class StaticCheckbox extends StaticCheckbox_base {
     /**

package/dist/components/staticcheckbox/staticcheckbox.component.js

@@ -14,25 +14,36 @@ import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import styles from './staticcheckbox.styles';
 import { ICON_NAME } from './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.
  */
 class StaticCheckbox extends DisabledMixin(Component) {
     constructor() {

package/dist/components/staticradio/staticradio.component.d.ts

@@ -2,23 +2,33 @@ import { CSSResult } from 'lit';
 import { Component } from '../../models';
 declare const StaticRadio_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
 /**
- * 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 class StaticRadio extends StaticRadio_base {
     /**