@momentum-design/components 0.129.37 → 0.129.38

package/dist/custom-elements.json

@@ -5094,24 +5094,16 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
+          "description": "The Bullet component displays a small circular visual indicator used to organize and present\nitems in a list format. It provides a simple, consistent way to mark list items or emphasize\ncontent points.\n\nBullets are available in three sizes (small, medium, large) to accommodate different layout\ndensities and visual hierarchies.\n\n## When to use\nUse bullets to create unordered lists, mark navigation items, or provide visual indicators\nfor list content. Choose bullet size based on content importance and layout density.\n\n## Accessibility\n- Bullets are purely decorative and should be used alongside meaningful text content\n- Do not rely solely on bullet size or color to convey information",
           "name": "Bullet",
           "cssProperties": [
             {
-              "description": "background color of the bullet",
+              "description": "Background color of the bullet.",
               "name": "--mdc-bullet-background-color"
             },
             {
-              "description": "small size value of the bullet",
-              "name": "--mdc-bullet-size-small"
-            },
-            {
-              "description": "medium size value of the bullet",
-              "name": "--mdc-bullet-size-medium"
-            },
-            {
-              "description": "large size value of the bullet",
-              "name": "--mdc-bullet-size-large"
+              "description": "Height of the bullet.",
+              "name": "--mdc-bullet-size"
             }
           ],
           "members": [
@@ -5144,7 +5136,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-bullet",
-          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n */",
+          "jsDoc": "/**\n * The Bullet component displays a small circular visual indicator used to organize and present\n * items in a list format. It provides a simple, consistent way to mark list items or emphasize\n * content points.\n *\n * Bullets are available in three sizes (small, medium, large) to accommodate different layout\n * densities and visual hierarchies.\n *\n * ## When to use\n * Use bullets to create unordered lists, mark navigation items, or provide visual indicators\n * for list content. Choose bullet size based on content importance and layout density.\n *\n * ## Accessibility\n * - Bullets are purely decorative and should be used alongside meaningful text content\n * - Do not rely solely on bullet size or color to convey information\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - Background color of the bullet.\n * @cssproperty --mdc-bullet-size - Height of the bullet.\n */",
           "customElement": true
         }
       ],
@@ -16436,62 +16428,68 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-divider` is a component that provides a line to separate and organize content.\nIt can also include a button or text positioned centrally, allowing users to interact with the layout.\n\n**Divider Orientation:**\n- **Horizontal**: A thin, horizontal line.\n- **Vertical**: A thin, vertical line.\n\n**Divider Variants:**\n- **solid**: Solid line.\n- **gradient**: Gradient Line.\n\n**Divider Types:**\n- The type of divider is inferred based on the kind of slot present.\n - **Primary**: A simple horizontal or vertical divider.\n - **Text**: A horizontal divider with a text label in the center.\n - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n\n**Accessibility:**\n- When the slot is replaced by an `mdc-button`:\n  - `aria-label` should be passed to the `mdc-button`.\n  - `aria-expanded` should be passed to the `mdc-button`.\n\n**Notes:**\n- If the slot is replaced by an invalid tag name or contains multiple elements,\n  the divider defaults to the **Primary** type.\n- To override the styles of the divider, use the provided CSS custom properties.",
+          "description": "The Divider component provides a visual line to separate and organize content within layouts.\nIt supports both horizontal and vertical orientations with solid or gradient styles, and can\noptionally include centered text labels or interactive grabber buttons.\n\nThe divider automatically infers its type based on the content in its slot:\n- **Primary**: Simple line with no content\n- **Text**: Horizontal line with centered text label\n- **Grabber Button**: Line with centered interactive button\n\n**Note:**\n- Vertical text dividers are not currently supported.\n- If the slot contains invalid tag names or multiple elements, the divider defaults to the Primary type\n- Use the provided CSS custom properties to customize divider styles\n\n## When to use\nUse dividers to create visual separation between content sections, list items, or layout regions.\nAdd text labels to provide context, or grabber buttons to create resizable panes.\n\n## Accessibility\n- When using a grabber button, provide `aria-label` to describe its purpose\n- Set `aria-expanded` on the button to indicate the current state of resizable sections\n- Ensure sufficient color contrast for the divider line",
           "name": "Divider",
           "cssProperties": [
             {
-              "description": "background color of the divider",
+              "description": "Background color of the divider line.",
               "name": "--mdc-divider-background-color"
             },
             {
-              "description": "width of the divider",
+              "description": "Width (thickness) of the divider line.",
               "name": "--mdc-divider-width"
             },
             {
-              "description": "gradient of the horizontal divider",
+              "description": "Gradient for horizontal dividers.",
               "name": "--mdc-divider-horizontal-gradient"
             },
             {
-              "description": "gradient of the vertical divider",
+              "description": "Gradient for vertical dividers.",
               "name": "--mdc-divider-vertical-gradient"
             },
             {
-              "description": "font size of label in the text divider",
+              "description": "Font size of the text label in text dividers.",
               "name": "--mdc-divider-text-size"
             },
             {
-              "description": "font color of label in the text divider",
+              "description": "Font color of the text label in text dividers.",
               "name": "--mdc-divider-text-color"
             },
             {
-              "description": "left and right margin of label in the text divider",
+              "description": "Left and right margin of the text label.",
               "name": "--mdc-divider-text-margin"
             },
             {
-              "description": "line height of label in the text divider",
+              "description": "Line height of the text label.",
               "name": "--mdc-divider-text-line-height"
             },
             {
-              "description": "background color of the grabber button in rest state",
+              "description": "Background color of the grabber button in rest state.",
               "name": "--mdc-divider-grabber-button-background-color-normal"
             },
             {
-              "description": "background color of the grabber button in hover state",
+              "description": "Background color of the grabber button in hover state.",
               "name": "--mdc-divider-grabber-button-background-color-hover"
             },
             {
-              "description": "background color of the grabber button in pressed state",
+              "description": "Background color of the grabber button in pressed state.",
               "name": "--mdc-divider-grabber-button-background-color-pressed"
             },
             {
-              "description": "border color of the grabber button",
+              "description": "Border color of the grabber button.",
               "name": "--mdc-divider-grabber-button-border-color"
             },
             {
-              "description": "border radius of the grabber button",
+              "description": "Border radius of the grabber button.",
               "name": "--mdc-divider-grabber-button-border-radius"
             }
           ],
+          "slots": [
+            {
+              "description": "Content for the divider. Use `mdc-text` for text labels or `mdc-button` for grabber buttons.",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -16499,8 +16497,8 @@
               "type": {
                 "text": "Directions"
               },
-              "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
-              "default": "'negative'",
+              "description": "Direction of the arrow icon displayed on the grabber button.\n- **positive**: Up arrow (horizontal) or right arrow (vertical)\n- **negative**: Down arrow (horizontal) or left arrow (vertical)\n\nOnly applies when using a grabber button. Directions follow the Cartesian coordinate system.",
+              "default": "negative",
               "attribute": "arrow-direction",
               "reflects": true
             },
@@ -16510,8 +16508,8 @@
               "type": {
                 "text": "Directions"
               },
-              "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
-              "default": "'negative'",
+              "description": "Position of the grabber button along the divider line.\n- **positive**: Right side (horizontal) or top side (vertical)\n- **negative**: Left side (horizontal) or bottom side (vertical)\n\nOnly applies when using a grabber button. Directions follow the Cartesian coordinate system.",
+              "default": "negative",
               "attribute": "button-position",
               "reflects": true
             },
@@ -16560,7 +16558,7 @@
               "type": {
                 "text": "DividerOrientation"
               },
-              "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
+              "description": "Determines the orientation of the divider line.\n- **horizontal**: A thin horizontal line\n- **vertical**: A thin vertical line\n\nNote: Vertical text dividers are not currently supported.",
               "default": "horizontal",
               "attribute": "orientation",
               "reflects": true
@@ -16612,7 +16610,7 @@
               "type": {
                 "text": "DividerVariant"
               },
-              "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
+              "description": "Visual style of the divider line.\n- **solid**: Solid line with uniform color\n- **gradient**: Gradient line that fades on both ends",
               "default": "solid",
               "attribute": "variant",
               "reflects": true
@@ -16624,7 +16622,7 @@
               "type": {
                 "text": "DividerOrientation"
               },
-              "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
+              "description": "Determines the orientation of the divider line.\n- **horizontal**: A thin horizontal line\n- **vertical**: A thin vertical line\n\nNote: Vertical text dividers are not currently supported.",
               "default": "horizontal",
               "fieldName": "orientation"
             },
@@ -16633,7 +16631,7 @@
               "type": {
                 "text": "DividerVariant"
               },
-              "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
+              "description": "Visual style of the divider line.\n- **solid**: Solid line with uniform color\n- **gradient**: Gradient line that fades on both ends",
               "default": "solid",
               "fieldName": "variant"
             },
@@ -16642,8 +16640,8 @@
               "type": {
                 "text": "Directions"
               },
-              "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
-              "default": "'negative'",
+              "description": "Direction of the arrow icon displayed on the grabber button.\n- **positive**: Up arrow (horizontal) or right arrow (vertical)\n- **negative**: Down arrow (horizontal) or left arrow (vertical)\n\nOnly applies when using a grabber button. Directions follow the Cartesian coordinate system.",
+              "default": "negative",
               "fieldName": "arrowDirection"
             },
             {
@@ -16651,8 +16649,8 @@
               "type": {
                 "text": "Directions"
               },
-              "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
-              "default": "'negative'",
+              "description": "Position of the grabber button along the divider line.\n- **positive**: Right side (horizontal) or top side (vertical)\n- **negative**: Left side (horizontal) or bottom side (vertical)\n\nOnly applies when using a grabber button. Directions follow the Cartesian coordinate system.",
+              "default": "negative",
               "fieldName": "buttonPosition"
             }
           ],
@@ -16661,7 +16659,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-divider",
-          "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n *  - **Primary**: A simple horizontal or vertical divider.\n *  - **Text**: A horizontal divider with a text label in the center.\n *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n *   - `aria-label` should be passed to the `mdc-button`.\n *   - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n *   the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button\n *  in rest state\n * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button\n *  in hover state\n * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button\n *  in pressed state\n * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
+          "jsDoc": "/**\n * The Divider component provides a visual line to separate and organize content within layouts.\n * It supports both horizontal and vertical orientations with solid or gradient styles, and can\n * optionally include centered text labels or interactive grabber buttons.\n *\n * The divider automatically infers its type based on the content in its slot:\n * - **Primary**: Simple line with no content\n * - **Text**: Horizontal line with centered text label\n * - **Grabber Button**: Line with centered interactive button\n * \n * **Note:**\n * - Vertical text dividers are not currently supported.\n * - If the slot contains invalid tag names or multiple elements, the divider defaults to the Primary type\n * - Use the provided CSS custom properties to customize divider styles\n *\n * ## When to use\n * Use dividers to create visual separation between content sections, list items, or layout regions.\n * Add text labels to provide context, or grabber buttons to create resizable panes.\n *\n * ## Accessibility\n * - When using a grabber button, provide `aria-label` to describe its purpose\n * - Set `aria-expanded` on the button to indicate the current state of resizable sections\n * - Ensure sufficient color contrast for the divider line\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - Background color of the divider line.\n * @cssproperty --mdc-divider-width - Width (thickness) of the divider line.\n * @cssproperty --mdc-divider-horizontal-gradient - Gradient for horizontal dividers.\n * @cssproperty --mdc-divider-vertical-gradient - Gradient for vertical dividers.\n * @cssproperty --mdc-divider-text-size - Font size of the text label in text dividers.\n * @cssproperty --mdc-divider-text-color - Font color of the text label in text dividers.\n * @cssproperty --mdc-divider-text-margin - Left and right margin of the text label.\n * @cssproperty --mdc-divider-text-line-height - Line height of the text label.\n * @cssproperty --mdc-divider-grabber-button-background-color-normal - Background color of the grabber button in rest state.\n * @cssproperty --mdc-divider-grabber-button-background-color-hover - Background color of the grabber button in hover state.\n * @cssproperty --mdc-divider-grabber-button-background-color-pressed - Background color of the grabber button in pressed state.\n * @cssproperty --mdc-divider-grabber-button-border-color - Border color of the grabber button.\n * @cssproperty --mdc-divider-grabber-button-border-radius - Border radius of the grabber button.\n *\n * @slot - Content for the divider. Use `mdc-text` for text labels or `mdc-button` for grabber buttons.\n */",
           "customElement": true
         }
       ],
@@ -23651,23 +23649,23 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+          "description": "The Marker component displays a vertical line (0.25rem wide) used to draw attention to specific content\nor signify important information. It provides visual emphasis through color and pattern variations.\n\nMarkers are commonly used alongside list items, cards, or content blocks to indicate status,\npriority, or categorization.\n\n## When to use\nUse markers to highlight important content, indicate status or priority levels, or provide\nvisual categorization in lists and layouts.\n\n## Accessibility\n- Markers are purely decorative and should not convey information solely through color\n- Always pair markers with text labels or other indicators to convey meaning\n- Ensure sufficient color contrast for visibility",
           "name": "Marker",
           "cssProperties": [
             {
-              "description": "Allows customization of the default background color in solid variant.",
+              "description": "Background color for solid variant markers.",
               "name": "--mdc-marker-solid-background-color"
             },
             {
-              "description": "Allows customization of the default stripes in striped variant.",
+              "description": "Stripe color for striped variant markers.",
               "name": "--mdc-marker-striped-color"
             },
             {
-              "description": "Allows customization of the default background color in striped variant.",
+              "description": "Background color for striped variant markers.",
               "name": "--mdc-marker-striped-background-color"
             },
             {
-              "description": "Allows customization of the default width.",
+              "description": "Width (thickness) of the marker line.",
               "name": "--mdc-marker-width"
             }
           ],
@@ -23679,7 +23677,7 @@
                 "text": "MarkerVariants"
               },
               "privacy": "public",
-              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+              "description": "Visual style of the marker.\n- **solid**: Solid colored vertical line\n- **striped**: Vertical line with diagonal stripes pattern",
               "default": "solid",
               "attribute": "variant",
               "reflects": true
@@ -23691,7 +23689,7 @@
               "type": {
                 "text": "MarkerVariants"
               },
-              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+              "description": "Visual style of the marker.\n- **solid**: Solid colored vertical line\n- **striped**: Vertical line with diagonal stripes pattern",
               "default": "solid",
               "fieldName": "variant"
             }
@@ -23701,7 +23699,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-marker",
-          "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
+          "jsDoc": "/**\n * The Marker component displays a vertical line (0.25rem wide) used to draw attention to specific content\n * or signify important information. It provides visual emphasis through color and pattern variations.\n *\n * Markers are commonly used alongside list items, cards, or content blocks to indicate status,\n * priority, or categorization.\n *\n * ## When to use\n * Use markers to highlight important content, indicate status or priority levels, or provide\n * visual categorization in lists and layouts.\n *\n * ## Accessibility\n * - Markers are purely decorative and should not convey information solely through color\n * - Always pair markers with text labels or other indicators to convey meaning\n * - Ensure sufficient color contrast for visibility\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Background color for solid variant markers.\n * @cssproperty --mdc-marker-striped-color - Stripe color for striped variant markers.\n * @cssproperty --mdc-marker-striped-background-color - Background color for striped variant markers.\n * @cssproperty --mdc-marker-width - Width (thickness) of the marker line.\n */",
           "customElement": true
         }
       ],
@@ -44599,39 +44597,39 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "StaticCheckbox is a decorative component styled as a checkbox for visual presentation.\nUnlike the interactive `mdc-checkbox`, this component does not handle user interactions or form submissions.\nIt is used purely for displaying checkbox states in read-only scenarios.\n\nThis component supports five display states: checked, indeterminate, disabled, readonly, and soft-disabled.",
+          "description": "The StaticCheckbox component is a decorative, non-interactive checkbox used for visual\npresentation in read-only scenarios. Unlike the interactive `mdc-checkbox`, it does not\nhandle user interactions or form submissions.\n\nThis component supports multiple visual states: checked, indeterminate, disabled, readonly,\nand soft-disabled.\n\n## When to use\nUse StaticCheckbox to display checkbox states in read-only contexts such as summary views,\nconfirmation screens, or when showing historical form data. For interactive checkboxes, use\n`mdc-checkbox` instead.\n\n## Accessibility\n- StaticCheckbox is decorative and non-interactive by design\n- Always pair with descriptive text labels in the default slot\n- Do not use this as a replacement for interactive checkboxes in forms",
           "name": "StaticCheckbox",
           "cssProperties": [
             {
-              "description": "The border color of the checkbox.",
+              "description": "Border color of the checkbox.",
               "name": "--mdc-staticcheckbox-border-color"
             },
             {
-              "description": "The background color of the checkbox.",
+              "description": "Background color of the checkbox.",
               "name": "--mdc-staticcheckbox-background-color"
             },
             {
-              "description": "The icon color of the checkbox.",
+              "description": "Icon color of the checkbox.",
               "name": "--mdc-staticcheckbox-icon-color"
             },
             {
-              "description": "The size of the checkbox.",
+              "description": "Size of the checkbox.",
               "name": "--mdc-staticcheckbox-size"
             }
           ],
           "cssParts": [
             {
-              "description": "The container for the checkbox icon",
+              "description": "The container for the checkbox icon.",
               "name": "icon-container"
             },
             {
-              "description": "The checkbox icon element",
+              "description": "The checkbox icon element.",
               "name": "checkbox-icon"
             }
           ],
           "slots": [
             {
-              "description": "Default slot for adding label text",
+              "description": "Default slot for label text.",
               "name": ""
             }
           ],
@@ -44758,7 +44756,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-staticcheckbox",
-          "jsDoc": "/**\n * StaticCheckbox is a decorative component styled as a checkbox for visual presentation.\n * Unlike the interactive `mdc-checkbox`, this component does not handle user interactions or form submissions.\n * It is used purely for displaying checkbox states in read-only scenarios.\n *\n * This component supports five display states: checked, indeterminate, disabled, readonly, and soft-disabled.\n *\n * @tagname mdc-staticcheckbox\n *\n * @dependency mdc-icon\n *\n * @cssproperty --mdc-staticcheckbox-border-color - The border color of the checkbox.\n * @cssproperty --mdc-staticcheckbox-background-color - The background color of the checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-color - The icon color of the checkbox.\n * @cssproperty --mdc-staticcheckbox-size - The size of the checkbox.\n *\n * @csspart icon-container - The container for the checkbox icon\n * @csspart checkbox-icon - The checkbox icon element\n *\n * @slot - Default slot for adding label text\n */",
+          "jsDoc": "/**\n * The StaticCheckbox component is a decorative, non-interactive checkbox used for visual\n * presentation in read-only scenarios. Unlike the interactive `mdc-checkbox`, it does not\n * handle user interactions or form submissions.\n *\n * This component supports multiple visual states: checked, indeterminate, disabled, readonly,\n * and soft-disabled.\n *\n * ## When to use\n * Use StaticCheckbox to display checkbox states in read-only contexts such as summary views,\n * confirmation screens, or when showing historical form data. For interactive checkboxes, use\n * `mdc-checkbox` instead.\n *\n * ## Accessibility\n * - StaticCheckbox is decorative and non-interactive by design\n * - Always pair with descriptive text labels in the default slot\n * - Do not use this as a replacement for interactive checkboxes in forms\n *\n * @tagname mdc-staticcheckbox\n *\n * @dependency mdc-icon\n *\n * @cssproperty --mdc-staticcheckbox-border-color - Border color of the checkbox.\n * @cssproperty --mdc-staticcheckbox-background-color - Background color of the checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-color - Icon color of the checkbox.\n * @cssproperty --mdc-staticcheckbox-size - Size of the checkbox.\n *\n * @csspart icon-container - The container for the checkbox icon.\n * @csspart checkbox-icon - The checkbox icon element.\n *\n * @slot - Default slot for label text.\n */",
           "customElement": true
         }
       ],
@@ -44918,39 +44916,39 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "StaticRadio is a decorative component styled as a radio button for visual presentation.\nUnlike the interactive `mdc-radio`, this component does not handle user interactions or form submissions.\nIt is used purely for displaying radio button states in read-only scenarios.\n\nThis component supports four display states: checked, disabled, readonly, and soft-disabled.",
+          "description": "The StaticRadio component is a decorative, non-interactive radio button used for visual\npresentation in read-only scenarios. Unlike the interactive `mdc-radio`, it does not\nhandle user interactions or form submissions.\n\nThis component supports multiple visual states: checked, disabled, readonly, and soft-disabled.\n\n## When to use\nUse StaticRadio to display radio button states in read-only contexts such as summary views,\nconfirmation screens, or when showing historical form data. For interactive radio buttons, use\n`mdc-radio` instead.\n\n## Accessibility\n- StaticRadio is decorative and non-interactive by design\n- Always pair with descriptive text labels in the default slot\n- Do not use this as a replacement for interactive radio buttons in forms",
           "name": "StaticRadio",
           "cssProperties": [
             {
-              "description": "The size of the inner circle when checked.",
+              "description": "Size of the inner circle when checked.",
               "name": "--mdc-staticradio-inner-circle-size"
             },
             {
-              "description": "The size of the outer circle border.",
+              "description": "Size of the outer circle border.",
               "name": "--mdc-staticradio-outer-circle-size"
             },
             {
-              "description": "The background color of the inner circle when checked.",
+              "description": "Background color of the inner circle when checked.",
               "name": "--mdc-staticradio-inner-circle-background-color"
             },
             {
-              "description": "The border color of the outer circle.",
+              "description": "Border color of the outer circle.",
               "name": "--mdc-staticradio-outer-circle-border-color"
             },
             {
-              "description": "The background color of the outer circle.",
+              "description": "Background color of the outer circle.",
               "name": "--mdc-staticradio-outer-circle-background-color"
             }
           ],
           "cssParts": [
             {
-              "description": "The radio icon element",
+              "description": "The radio icon element.",
               "name": "radio-icon"
             }
           ],
           "slots": [
             {
-              "description": "Default slot for the label of the radio",
+              "description": "Default slot for the label of the radio.",
               "name": ""
             }
           ],
@@ -45057,7 +45055,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-staticradio",
-          "jsDoc": "/**\n * StaticRadio is a decorative component styled as a radio button for visual presentation.\n * Unlike the interactive `mdc-radio`, this component does not handle user interactions or form submissions.\n * It is used purely for displaying radio button states in read-only scenarios.\n *\n * This component supports four display states: checked, disabled, readonly, and soft-disabled.\n *\n * @tagname mdc-staticradio\n *\n * @cssproperty --mdc-staticradio-inner-circle-size - The size of the inner circle when checked.\n * @cssproperty --mdc-staticradio-outer-circle-size - The size of the outer circle border.\n * @cssproperty --mdc-staticradio-inner-circle-background-color - The background color of the inner circle when checked.\n * @cssproperty --mdc-staticradio-outer-circle-border-color - The border color of the outer circle.\n * @cssproperty --mdc-staticradio-outer-circle-background-color - The background color of the outer circle.\n *\n * @csspart radio-icon - The radio icon element\n *\n * @slot - Default slot for the label of the radio\n */",
+          "jsDoc": "/**\n * The StaticRadio component is a decorative, non-interactive radio button used for visual\n * presentation in read-only scenarios. Unlike the interactive `mdc-radio`, it does not\n * handle user interactions or form submissions.\n *\n * This component supports multiple visual states: checked, disabled, readonly, and soft-disabled.\n *\n * ## When to use\n * Use StaticRadio to display radio button states in read-only contexts such as summary views,\n * confirmation screens, or when showing historical form data. For interactive radio buttons, use\n * `mdc-radio` instead.\n *\n * ## Accessibility\n * - StaticRadio is decorative and non-interactive by design\n * - Always pair with descriptive text labels in the default slot\n * - Do not use this as a replacement for interactive radio buttons in forms\n *\n * @tagname mdc-staticradio\n *\n * @cssproperty --mdc-staticradio-inner-circle-size - Size of the inner circle when checked.\n * @cssproperty --mdc-staticradio-outer-circle-size - Size of the outer circle border.\n * @cssproperty --mdc-staticradio-inner-circle-background-color - Background color of the inner circle when checked.\n * @cssproperty --mdc-staticradio-outer-circle-border-color - Border color of the outer circle.\n * @cssproperty --mdc-staticradio-outer-circle-background-color - Background color of the outer circle.\n *\n * @csspart radio-icon - The radio icon element.\n *\n * @slot - Default slot for the label of the radio.\n */",
           "customElement": true
         }
       ],
@@ -45078,35 +45076,35 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The StaticToggle is a decorative component that visually represents a toggle switch without interactive functionality.\nIt is primarily used for display purposes or as a building block within custom interactive components.\nThis component shares the same visual styling as the interactive `mdc-toggle` component.",
+          "description": "The StaticToggle component is a decorative, non-interactive toggle switch used for visual\npresentation. It shares the same styling as the interactive `mdc-toggle` component but does\nnot provide user interaction functionality.\n\nThis component supports multiple visual states: checked, disabled, readonly, soft-disabled,\nand size variations (default, compact).\n\n## When to use\nUse StaticToggle to display toggle states in read-only contexts such as summary views,\nconfirmation screens, or as a building block within custom interactive components. For\ninteractive toggles, use `mdc-toggle` instead.\n\n## Accessibility\n- StaticToggle is decorative and non-interactive by design\n- When used within parent components, ensure proper ARIA attributes are provided by the parent\n- Do not use this as a replacement for interactive toggles in forms",
           "name": "StaticToggle",
           "cssProperties": [
             {
-              "description": "The width of the static toggle.",
+              "description": "Width of the static toggle.",
               "name": "--mdc-statictoggle-width"
             },
             {
-              "description": "The height of the static toggle.",
+              "description": "Height of the static toggle.",
               "name": "--mdc-statictoggle-height"
             },
             {
-              "description": "The border radius of the static toggle.",
+              "description": "Border radius of the static toggle.",
               "name": "--mdc-statictoggle-border-radius"
             },
             {
-              "description": "The border color of the static toggle.",
+              "description": "Border color of the static toggle.",
               "name": "--mdc-statictoggle-border-color"
             },
             {
-              "description": "The background color of the static toggle.",
+              "description": "Background color of the static toggle.",
               "name": "--mdc-statictoggle-background-color"
             },
             {
-              "description": "The icon color of the static toggle.",
+              "description": "Icon color of the static toggle.",
               "name": "--mdc-statictoggle-icon-color"
             },
             {
-              "description": "The icon background color of the static toggle.",
+              "description": "Icon background color of the static toggle.",
               "name": "--mdc-statictoggle-icon-background-color"
             }
           ],
@@ -45249,7 +45247,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-statictoggle",
-          "jsDoc": "/**\n * The StaticToggle is a decorative component that visually represents a toggle switch without interactive functionality.\n * It is primarily used for display purposes or as a building block within custom interactive components.\n * This component shares the same visual styling as the interactive `mdc-toggle` component.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-statictoggle\n *\n * @slot - Default slot for slotted content (typically used by parent `mdc-toggle` for the checkbox input).\n *\n * @cssproperty --mdc-statictoggle-width - The width of the static toggle.\n * @cssproperty --mdc-statictoggle-height - The height of the static toggle.\n * @cssproperty --mdc-statictoggle-border-radius - The border radius of the static toggle.\n * @cssproperty --mdc-statictoggle-border-color - The border color of the static toggle.\n * @cssproperty --mdc-statictoggle-background-color - The background color of the static toggle.\n * @cssproperty --mdc-statictoggle-icon-color - The icon color of the static toggle.\n * @cssproperty --mdc-statictoggle-icon-background-color - The icon background color of the static toggle.\n *\n * @csspart slider - The slider part of the toggle.\n * @csspart toggle-icon - The icon part of the toggle.\n */",
+          "jsDoc": "/**\n * The StaticToggle component is a decorative, non-interactive toggle switch used for visual\n * presentation. It shares the same styling as the interactive `mdc-toggle` component but does\n * not provide user interaction functionality.\n *\n * This component supports multiple visual states: checked, disabled, readonly, soft-disabled,\n * and size variations (default, compact).\n *\n * ## When to use\n * Use StaticToggle to display toggle states in read-only contexts such as summary views,\n * confirmation screens, or as a building block within custom interactive components. For\n * interactive toggles, use `mdc-toggle` instead.\n *\n * ## Accessibility\n * - StaticToggle is decorative and non-interactive by design\n * - When used within parent components, ensure proper ARIA attributes are provided by the parent\n * - Do not use this as a replacement for interactive toggles in forms\n *\n * @tagname mdc-statictoggle\n *\n * @dependency mdc-icon\n *\n * @cssproperty --mdc-statictoggle-width - Width of the static toggle.\n * @cssproperty --mdc-statictoggle-height - Height of the static toggle.\n * @cssproperty --mdc-statictoggle-border-radius - Border radius of the static toggle.\n * @cssproperty --mdc-statictoggle-border-color - Border color of the static toggle.\n * @cssproperty --mdc-statictoggle-background-color - Background color of the static toggle.\n * @cssproperty --mdc-statictoggle-icon-color - Icon color of the static toggle.\n * @cssproperty --mdc-statictoggle-icon-background-color - Icon background color of the static toggle.\n *\n * @csspart slider - The slider part of the toggle.\n * @csspart toggle-icon - The icon part of the toggle.\n *\n * @slot - Default slot for slotted content (typically used by parent `mdc-toggle` for the checkbox input).\n */",
           "customElement": true
         }
       ],

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,