@momentum-design/components 0.129.9 → 0.129.10

package/dist/custom-elements.json

@@ -8,7 +8,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n- Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n- Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.",
+          "description": "An accordion is a vertically stacked component with a header and expandable/collapsible body section.\nThe header displays a prefix icon, header text, optional control slots (leading and trailing), and a dedicated expand/collapse button.\nUnlike `accordionbutton`, only the expand/collapse button is clickable and not the entire header.\n\n## Header contains\n- Optional prefix icon\n- Header text (default H3, customizable via `data-aria-level`)\n- Leading slot for controls (placed after header text)\n- Trailing slot for controls (placed before expand/collapse button)\n- Expand/collapse button (automatically positioned at the end)\n\n## Body contains\n- Default slot for any content\n\nThe accordion supports different border styles through the `variant` attribute and different spacing through the `size` attribute.\nAn accordion can be disabled, which prevents all interactions including the expand/collapse button and any slotted controls.\n\n## When to use\n- Use `mdc-accordion` when you need additional interactive controls (chips, badges, buttons, icons) in the header.\n- Use `mdc-accordionbutton` if you only need a simple clickable header without extra controls.\n\n## Accessibility\n- Always provide `open-button-aria-label` and `close-button-aria-label` for screen reader support\n- Adjust `data-aria-level` based on heading hierarchy in your page\n- Note: Screen readers may lose focus when toggling if accordion is expanded by default",
           "name": "Accordion",
           "cssProperties": [
             {
@@ -20,24 +20,24 @@
               }
             },
             {
-              "description": "The hover color of the accordion.",
-              "name": "--mdc-accordionbutton-hover-color",
+              "description": "The disabled text color of the accordion.",
+              "name": "--mdc-accordionbutton-disabled-color",
               "inheritedFrom": {
                 "name": "AccordionButton",
                 "module": "src/components/accordionbutton/accordionbutton.component.ts"
               }
             },
             {
-              "description": "The active color of the accordion.",
-              "name": "--mdc-accordionbutton-active-color",
+              "description": "The hover background color of the accordion button header.",
+              "name": "--mdc-accordionbutton-hover-color",
               "inheritedFrom": {
                 "name": "AccordionButton",
                 "module": "src/components/accordionbutton/accordionbutton.component.ts"
               }
             },
             {
-              "description": "The disabled color of the accordion.",
-              "name": "--mdc-accordionbutton-disabled-color",
+              "description": "The active background color of the accordion button header.",
+              "name": "--mdc-accordionbutton-active-color",
               "inheritedFrom": {
                 "name": "AccordionButton",
                 "module": "src/components/accordionbutton/accordionbutton.component.ts"
@@ -100,11 +100,11 @@
           ],
           "slots": [
             {
-              "description": "The leading controls slot of the accordion on the header section.",
+              "description": "The leading controls slot of the accordion on the header section. Placed after the header text.",
               "name": "leading-controls"
             },
             {
-              "description": "The trailing controls slot of the accordion on the header section.",
+              "description": "The trailing controls slot of the accordion on the header section. Placed before the expand/collapse button.",
               "name": "trailing-controls"
             },
             {
@@ -123,7 +123,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Aria-label attribute for the trigger button when accordion is expanded.",
+              "description": "Accessible label for the expand/collapse button when the accordion is in expanded state.\nProvides context to screen readers about the button's action to close the accordion.",
               "attribute": "close-button-aria-label",
               "reflects": true
             },
@@ -133,7 +133,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "The aria level of the accordion component.",
+              "description": "Specifies the heading level for accessibility purposes.\nShould match the heading hierarchy of the page (e.g., 2 for H2, 3 for H3).",
               "default": "3",
               "attribute": "data-aria-level",
               "reflects": true,
@@ -153,8 +153,8 @@
               "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "name": "AccordionButton",
+                "module": "components/accordionbutton/accordionbutton.component.js"
               }
             },
             {
@@ -178,7 +178,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "The visibility of the accordion button.",
+              "description": "Controls whether the accordion body content is visible.\n- When true, the body section is shown; when false, it is hidden.",
               "default": "false",
               "attribute": "expanded",
               "reflects": true,
@@ -247,7 +247,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The header text of the accordion item.",
+              "description": "Text content displayed in the accordion header.",
               "attribute": "header-text",
               "reflects": true,
               "inheritedFrom": {
@@ -261,7 +261,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Aria-label attribute for the trigger button when accordion is collapsed.",
+              "description": "Accessible label for the expand/collapse button when the accordion is in collapsed state.\nProvides context to screen readers about the button's action to open the accordion.",
               "attribute": "open-button-aria-label",
               "reflects": true
             },
@@ -271,7 +271,7 @@
               "type": {
                 "text": "IconNames | undefined"
               },
-              "description": "The leading icon that is displayed before the header text.",
+              "description": "Icon displayed at the start of the accordion header, before the header text.\nMust be a valid icon name.",
               "attribute": "prefix-icon",
               "inheritedFrom": {
                 "name": "AccordionButton",
@@ -350,7 +350,7 @@
               "type": {
                 "text": "Size"
               },
-              "description": "The size of the accordion item.",
+              "description": "Controls the spacing and padding of the accordion. \n- Small provides 1rem (16px) padding, large provides 1.5rem (24px) padding.",
               "default": "'small'",
               "attribute": "size",
               "reflects": true,
@@ -365,7 +365,7 @@
               "type": {
                 "text": "Variant"
               },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "description": "Visual style variant of the accordion. \n- Default includes borders, borderless removes all border styling.",
               "default": "'default'",
               "attribute": "variant",
               "reflects": true,
@@ -377,7 +377,7 @@
           ],
           "events": [
             {
-              "description": "(React: onShown) This event is triggered when the accordion is expanded.",
+              "description": "(React: onShown) This event is triggered when the accordion is toggled (expanded or collapsed).",
               "name": "shown",
               "reactName": "onShown",
               "inheritedFrom": {
@@ -392,7 +392,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Aria-label attribute for the trigger button when accordion is collapsed.",
+              "description": "Accessible label for the expand/collapse button when the accordion is in collapsed state.\nProvides context to screen readers about the button's action to open the accordion.",
               "fieldName": "openButtonAriaLabel"
             },
             {
@@ -400,7 +400,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Aria-label attribute for the trigger button when accordion is expanded.",
+              "description": "Accessible label for the expand/collapse button when the accordion is in expanded state.\nProvides context to screen readers about the button's action to close the accordion.",
               "fieldName": "closeButtonAriaLabel"
             },
             {
@@ -412,8 +412,8 @@
               "default": "undefined",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
               }
             },
             {
@@ -421,7 +421,7 @@
               "type": {
                 "text": "Size"
               },
-              "description": "The size of the accordion item.",
+              "description": "Controls the spacing and padding of the accordion. \n- Small provides 1rem (16px) padding, large provides 1.5rem (24px) padding.",
               "default": "'small'",
               "fieldName": "size",
               "inheritedFrom": {
@@ -434,7 +434,7 @@
               "type": {
                 "text": "Variant"
               },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "description": "Visual style variant of the accordion. \n- Default includes borders, borderless removes all border styling.",
               "default": "'default'",
               "fieldName": "variant",
               "inheritedFrom": {
@@ -447,7 +447,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "The aria level of the accordion component.",
+              "description": "Specifies the heading level for accessibility purposes.\nShould match the heading hierarchy of the page (e.g., 2 for H2, 3 for H3).",
               "default": "3",
               "fieldName": "dataAriaLevel",
               "inheritedFrom": {
@@ -460,7 +460,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "The visibility of the accordion button.",
+              "description": "Controls whether the accordion body content is visible.\n- When true, the body section is shown; when false, it is hidden.",
               "default": "false",
               "fieldName": "expanded",
               "inheritedFrom": {
@@ -473,7 +473,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The header text of the accordion item.",
+              "description": "Text content displayed in the accordion header.",
               "fieldName": "headerText",
               "inheritedFrom": {
                 "name": "AccordionButton",
@@ -485,7 +485,7 @@
               "type": {
                 "text": "IconNames | undefined"
               },
-              "description": "The leading icon that is displayed before the header text.",
+              "description": "Icon displayed at the start of the accordion header, before the header text.\nMust be a valid icon name.",
               "fieldName": "prefixIcon",
               "inheritedFrom": {
                 "name": "AccordionButton",
@@ -498,7 +498,7 @@
             "module": "/src/components/accordionbutton/accordionbutton.component"
           },
           "tagName": "mdc-accordion",
-          "jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart body-section - The body section of the accordion.\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n */",
+          "jsDoc": "/**\n * An accordion is a vertically stacked component with a header and expandable/collapsible body section.\n * The header displays a prefix icon, header text, optional control slots (leading and trailing), and a dedicated expand/collapse button.\n * Unlike `accordionbutton`, only the expand/collapse button is clickable and not the entire header.\n *\n * ## Header contains\n * - Optional prefix icon\n * - Header text (default H3, customizable via `data-aria-level`)\n * - Leading slot for controls (placed after header text)\n * - Trailing slot for controls (placed before expand/collapse button)\n * - Expand/collapse button (automatically positioned at the end)\n *\n * ## Body contains\n * - Default slot for any content\n *\n * The accordion supports different border styles through the `variant` attribute and different spacing through the `size` attribute.\n * An accordion can be disabled, which prevents all interactions including the expand/collapse button and any slotted controls.\n * \n * ## When to use\n * - Use `mdc-accordion` when you need additional interactive controls (chips, badges, buttons, icons) in the header.\n * - Use `mdc-accordionbutton` if you only need a simple clickable header without extra controls.\n *\n * ## Accessibility\n * - Always provide `open-button-aria-label` and `close-button-aria-label` for screen reader support\n * - Adjust `data-aria-level` based on heading hierarchy in your page\n * - Note: Screen readers may lose focus when toggling if accordion is expanded by default\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section. Placed after the header text.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section. Placed before the expand/collapse button.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is toggled (expanded or collapsed).\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled text color of the accordion.\n *\n * @csspart body-section - The body section of the accordion.\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n */",
           "customElement": true
         }
       ],
@@ -519,7 +519,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n\nIf an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.",
+          "description": "An accordion button is a vertically stacked component with a clickable header and expandable/collapsible body section.\nThe entire header is clickable to toggle the visibility of the body content.\n\n## Header contains\n- Optional prefix icon\n- Header text (default H3, customizable via `data-aria-level`)\n- Expand/collapse arrow icon (visual indicator)\n\n## Body contains\n- Default slot for any content\n\nThe accordion button supports different border styles through the `variant` attribute and different spacing through the `size` attribute.\nAn accordion button can be disabled, which prevents the header from being clickable.\n\n## When to use\n- Use `mdc-accordionbutton` for simple clickable headers without additional controls.\n- Use `mdc-accordion` instead if you need extra controls (chips, badges, icons) in the header.\n\n## Accessibility\n- Adjust `data-aria-level` based on heading hierarchy in your page.\n- Note: Screen readers may lose focus when toggling if accordion button is expanded by default.",
           "name": "AccordionButton",
           "cssProperties": [
             {
@@ -527,15 +527,15 @@
               "name": "--mdc-accordionbutton-border-color"
             },
             {
-              "description": "The hover color of the accordion button.",
+              "description": "The hover background color of the accordion button header.",
               "name": "--mdc-accordionbutton-hover-color"
             },
             {
-              "description": "The active color of the accordion button.",
+              "description": "The active background color of the accordion button header.",
               "name": "--mdc-accordionbutton-active-color"
             },
             {
-              "description": "The disabled color of the accordion button.",
+              "description": "The disabled text color of the accordion button.",
               "name": "--mdc-accordionbutton-disabled-color"
             }
           ],
@@ -578,7 +578,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "The aria level of the accordion component.",
+              "description": "Specifies the heading level for accessibility purposes.\nShould match the heading hierarchy of the page (e.g., 2 for H2, 3 for H3).",
               "default": "3",
               "attribute": "data-aria-level",
               "reflects": true
@@ -615,7 +615,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "The visibility of the accordion button.",
+              "description": "Controls whether the accordion body content is visible.\n- When true, the body section is shown; when false, it is hidden.",
               "default": "false",
               "attribute": "expanded",
               "reflects": true
@@ -668,7 +668,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The header text of the accordion item.",
+              "description": "Text content displayed in the accordion header.",
               "attribute": "header-text",
               "reflects": true
             },
@@ -678,7 +678,7 @@
               "type": {
                 "text": "IconNames | undefined"
               },
-              "description": "The leading icon that is displayed before the header text.",
+              "description": "Icon displayed at the start of the accordion header, before the header text.\nMust be a valid icon name.",
               "attribute": "prefix-icon"
             },
             {
@@ -736,7 +736,7 @@
               "type": {
                 "text": "Size"
               },
-              "description": "The size of the accordion item.",
+              "description": "Controls the spacing and padding of the accordion. \n- Small provides 1rem (16px) padding, large provides 1.5rem (24px) padding.",
               "default": "'small'",
               "attribute": "size",
               "reflects": true
@@ -747,7 +747,7 @@
               "type": {
                 "text": "Variant"
               },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "description": "Visual style variant of the accordion. \n- Default includes borders, borderless removes all border styling.",
               "default": "'default'",
               "attribute": "variant",
               "reflects": true
@@ -755,7 +755,7 @@
           ],
           "events": [
             {
-              "description": "(React: onShown) This event is triggered when the accordion button is expanded.",
+              "description": "(React: onShown) This event is triggered when the accordion button is toggled (expanded or collapsed).",
               "name": "shown",
               "reactName": "onShown"
             }
@@ -766,7 +766,7 @@
               "type": {
                 "text": "Size"
               },
-              "description": "The size of the accordion item.",
+              "description": "Controls the spacing and padding of the accordion. \n- Small provides 1rem (16px) padding, large provides 1.5rem (24px) padding.",
               "default": "'small'",
               "fieldName": "size"
             },
@@ -775,7 +775,7 @@
               "type": {
                 "text": "Variant"
               },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "description": "Visual style variant of the accordion. \n- Default includes borders, borderless removes all border styling.",
               "default": "'default'",
               "fieldName": "variant"
             },
@@ -784,7 +784,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "The aria level of the accordion component.",
+              "description": "Specifies the heading level for accessibility purposes.\nShould match the heading hierarchy of the page (e.g., 2 for H2, 3 for H3).",
               "default": "3",
               "fieldName": "dataAriaLevel"
             },
@@ -793,7 +793,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "The visibility of the accordion button.",
+              "description": "Controls whether the accordion body content is visible.\n- When true, the body section is shown; when false, it is hidden.",
               "default": "false",
               "fieldName": "expanded"
             },
@@ -802,7 +802,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The header text of the accordion item.",
+              "description": "Text content displayed in the accordion header.",
               "fieldName": "headerText"
             },
             {
@@ -810,7 +810,7 @@
               "type": {
                 "text": "IconNames | undefined"
               },
-              "description": "The leading icon that is displayed before the header text.",
+              "description": "Icon displayed at the start of the accordion header, before the header text.\nMust be a valid icon name.",
               "fieldName": "prefixIcon"
             },
             {
@@ -838,7 +838,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-accordionbutton",
-          "jsDoc": "/**\n * An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n *\n * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.\n *\n * @tagname mdc-accordionbutton\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion button is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.\n *\n * @csspart body-section - The body section of the accordion button.\n * @csspart header-button-section - The header button section of the accordion button.\n * @csspart header-section - The header section of the accordion button.\n * @csspart leading-header - The leading header of the accordion button.\n * @csspart trailing-header - The trailing header of the accordion button.\n * @csspart trailing-header__icon - The trailing header icon of the accordion button.\n */",
+          "jsDoc": "/**\n * An accordion button is a vertically stacked component with a clickable header and expandable/collapsible body section.\n * The entire header is clickable to toggle the visibility of the body content.\n *\n * ## Header contains\n * - Optional prefix icon\n * - Header text (default H3, customizable via `data-aria-level`)\n * - Expand/collapse arrow icon (visual indicator)\n *\n * ## Body contains\n * - Default slot for any content\n *\n * The accordion button supports different border styles through the `variant` attribute and different spacing through the `size` attribute.\n * An accordion button can be disabled, which prevents the header from being clickable.\n *\n * ## When to use\n * - Use `mdc-accordionbutton` for simple clickable headers without additional controls.\n * - Use `mdc-accordion` instead if you need extra controls (chips, badges, icons) in the header.\n *\n * ## Accessibility\n * - Adjust `data-aria-level` based on heading hierarchy in your page.\n * - Note: Screen readers may lose focus when toggling if accordion button is expanded by default.\n *\n * @tagname mdc-accordionbutton\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion button is toggled (expanded or collapsed).\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover background color of the accordion button header.\n * @cssproperty --mdc-accordionbutton-active-color - The active background color of the accordion button header.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled text color of the accordion button.\n *\n * @csspart body-section - The body section of the accordion button.\n * @csspart header-button-section - The header button section of the accordion button.\n * @csspart header-section - The header section of the accordion button.\n * @csspart leading-header - The leading header of the accordion button.\n * @csspart trailing-header - The trailing header of the accordion button.\n * @csspart trailing-header__icon - The trailing header icon of the accordion button.\n */",
           "customElement": true
         }
       ],
@@ -859,12 +859,12 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
+          "description": "An accordion group is a container that manages multiple accordion or accordionbutton components as a unified set.\nIt controls the visual styling, spacing, and expansion behavior of all child accordions.\n\nThe group applies consistent `variant` and `size` attributes to all children automatically.\nBy default, expanding one accordion collapses others (`allow-multiple` is false). Set `allow-multiple` to true to allow multiple expanded items.\n\n## Accepted children\n- Use `mdc-accordionbutton` children for simple clickable headers.\n- Use `mdc-accordion` children when you need additional controls (chips, badges, icons) in the headers.\n- Other elements in the slot are ignored.\n\n## Accessibility\n- Note: Screen readers may lose focus when toggling if the first accordion is expanded by default.",
           "name": "AccordionGroup",
           "cssProperties": [
             {
-              "description": "The border color of the entire accordiongroup",
-              "name": "--mdc-accordiongroup-border-color"
+              "description": "The border color applied to all child accordion items and their separators.",
+              "name": "--mdc-accordiongroup-items-border-color"
             }
           ],
           "slots": [
@@ -881,7 +881,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
+              "description": "Controls whether multiple accordions can be expanded simultaneously.\n- When false, expanding one accordion automatically collapses others.\n- When true, multiple accordions can remain open at the same time.",
               "attribute": "allow-multiple",
               "reflects": true
             },
@@ -938,7 +938,7 @@
               "type": {
                 "text": "Size"
               },
-              "description": "The size of the accordion item.",
+              "description": "Controls the spacing and padding for all accordion items in the group.\nThis size is applied to all child accordions.\n- Small provides 1rem (16px) padding, large provides 1.5rem (24px) padding.",
               "default": "'small'",
               "attribute": "size",
               "reflects": true
@@ -949,7 +949,7 @@
               "type": {
                 "text": "Variant"
               },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "description": "Visual style variant applied to all accordions in the group.\n- Stacked: accordions have 1.5rem gap between them.\n- Borderless: removes all borders from accordions and group.\n- Contained: accordions have continuous borders with no gaps.",
               "default": "'stacked'",
               "attribute": "variant",
               "reflects": true
@@ -961,7 +961,7 @@
               "type": {
                 "text": "Size"
               },
-              "description": "The size of the accordion item.",
+              "description": "Controls the spacing and padding for all accordion items in the group.\nThis size is applied to all child accordions.\n- Small provides 1rem (16px) padding, large provides 1.5rem (24px) padding.",
               "default": "'small'",
               "fieldName": "size"
             },
@@ -970,7 +970,7 @@
               "type": {
                 "text": "Variant"
               },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "description": "Visual style variant applied to all accordions in the group.\n- Stacked: accordions have 1.5rem gap between them.\n- Borderless: removes all borders from accordions and group.\n- Contained: accordions have continuous borders with no gaps.",
               "default": "'stacked'",
               "fieldName": "variant"
             },
@@ -980,7 +980,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
+              "description": "Controls whether multiple accordions can be expanded simultaneously.\n- When false, expanding one accordion automatically collapses others.\n- When true, multiple accordions can remain open at the same time.",
               "fieldName": "allowMultiple"
             }
           ],
@@ -989,7 +989,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-accordiongroup",
-          "jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
+          "jsDoc": "/**\n * An accordion group is a container that manages multiple accordion or accordionbutton components as a unified set.\n * It controls the visual styling, spacing, and expansion behavior of all child accordions.\n *\n * The group applies consistent `variant` and `size` attributes to all children automatically.\n * By default, expanding one accordion collapses others (`allow-multiple` is false). Set `allow-multiple` to true to allow multiple expanded items.\n *\n * ## Accepted children\n * - Use `mdc-accordionbutton` children for simple clickable headers.\n * - Use `mdc-accordion` children when you need additional controls (chips, badges, icons) in the headers.\n * - Other elements in the slot are ignored.\n *\n * ## Accessibility\n * - Note: Screen readers may lose focus when toggling if the first accordion is expanded by default.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-items-border-color - The border color applied to all child accordion items and their separators.\n */",
           "customElement": true
         }
       ],

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

@@ -2,30 +2,31 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/accordion';
 import type { Events as EventsInherited } from '../../components/accordionbutton/accordionbutton.types';
 /**
- * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.
+ * An accordion is a vertically stacked component with a header and expandable/collapsible body section.
+ * The header displays a prefix icon, header text, optional control slots (leading and trailing), and a dedicated expand/collapse button.
+ * Unlike `accordionbutton`, only the expand/collapse button is clickable and not the entire header.
  *
- * The header section contains:
- * - Prefix Icon
- * - Header Text
- * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.
- * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.
+ * ## Header contains
+ * - Optional prefix icon
+ * - Header text (default H3, customizable via `data-aria-level`)
+ * - Leading slot for controls (placed after header text)
+ * - Trailing slot for controls (placed before expand/collapse button)
+ * - Expand/collapse button (automatically positioned at the end)
  *
- * The body section contains:
- * - Default slot - User can place any content inside the body section.
+ * ## Body contains
+ * - Default slot for any content
  *
- * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>
- * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>
- * There are two sizes of accordion, one is small and the other is large.
- * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.
+ * The accordion supports different border styles through the `variant` attribute and different spacing through the `size` attribute.
+ * An accordion can be disabled, which prevents all interactions including the expand/collapse button and any slotted controls.
  *
- * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.
- * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.
+ * ## When to use
+ * - Use `mdc-accordion` when you need additional interactive controls (chips, badges, buttons, icons) in the header.
+ * - Use `mdc-accordionbutton` if you only need a simple clickable header without extra controls.
  *
- * An accordion can be disabled, and when it's disabled, the header section will not be clickable.
- *
- * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.
- *
- * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.
+ * ## Accessibility
+ * - Always provide `open-button-aria-label` and `close-button-aria-label` for screen reader support
+ * - Adjust `data-aria-level` based on heading hierarchy in your page
+ * - Note: Screen readers may lose focus when toggling if accordion is expanded by default
  *
  * @tagname mdc-accordion
  *
@@ -33,16 +34,14 @@ import type { Events as EventsInherited } from '../../components/accordionbutton
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @slot leading-controls - The leading controls slot of the accordion on the header section.
- * @slot trailing-controls - The trailing controls slot of the accordion on the header section.
+ * @slot leading-controls - The leading controls slot of the accordion on the header section. Placed after the header text.
+ * @slot trailing-controls - The trailing controls slot of the accordion on the header section. Placed before the expand/collapse button.
  * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.
  *
- * @event shown - (React: onShown) This event is triggered when the accordion is expanded.
+ * @event shown - (React: onShown) This event is triggered when the accordion is toggled (expanded or collapsed).
  *
  * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.
- * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.
- * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.
- * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.
+ * @cssproperty --mdc-accordionbutton-disabled-color - The disabled text color of the accordion.
  *
  * @csspart body-section - The body section of the accordion.
  * @csspart header-section - The header section of the accordion.