@momentum-design/components 0.121.4 → 0.121.6

package/dist/custom-elements.json

@@ -117,6 +117,26 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "openButtonAriaLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Aria-label attribute for the trigger button when accordion is collapsed.",
+              "attribute": "open-button-aria-label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "closeButtonAriaLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Aria-label attribute for the trigger button when accordion is expanded.",
+              "attribute": "close-button-aria-label",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "renderHeader",
@@ -366,14 +386,23 @@
               }
             }
           ],
-          "superclass": {
-            "name": "AccordionButton",
-            "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 */",
-          "customElement": true,
           "attributes": [
+            {
+              "name": "open-button-aria-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Aria-label attribute for the trigger button when accordion is collapsed.",
+              "fieldName": "openButtonAriaLabel"
+            },
+            {
+              "name": "close-button-aria-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Aria-label attribute for the trigger button when accordion is expanded.",
+              "fieldName": "closeButtonAriaLabel"
+            },
             {
               "name": "disabled",
               "type": {
@@ -463,7 +492,14 @@
                 "module": "src/components/accordionbutton/accordionbutton.component.ts"
               }
             }
-          ]
+          ],
+          "superclass": {
+            "name": "AccordionButton",
+            "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 */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -477,6 +513,346 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/accordionbutton/accordionbutton.component.js",
+      "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.",
+          "name": "AccordionButton",
+          "cssProperties": [
+            {
+              "description": "The border color of the accordion button.",
+              "name": "--mdc-accordionbutton-border-color"
+            },
+            {
+              "description": "The hover color of the accordion button.",
+              "name": "--mdc-accordionbutton-hover-color"
+            },
+            {
+              "description": "The active color of the accordion button.",
+              "name": "--mdc-accordionbutton-active-color"
+            },
+            {
+              "description": "The disabled color of the accordion button.",
+              "name": "--mdc-accordionbutton-disabled-color"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The body section of the accordion button.",
+              "name": "body-section"
+            },
+            {
+              "description": "The header button section of the accordion button.",
+              "name": "header-button-section"
+            },
+            {
+              "description": "The header section of the accordion button.",
+              "name": "header-section"
+            },
+            {
+              "description": "The leading header of the accordion button.",
+              "name": "leading-header"
+            },
+            {
+              "description": "The trailing header of the accordion button.",
+              "name": "trailing-header"
+            },
+            {
+              "description": "The trailing header icon of the accordion button.",
+              "name": "trailing-header__icon"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'default'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dataAriaLevel",
+              "type": {
+                "text": "number"
+              },
+              "description": "The aria level of the accordion component.",
+              "default": "3",
+              "attribute": "data-aria-level",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The visibility of the accordion button.",
+              "default": "false",
+              "attribute": "expanded",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "headerText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text of the accordion item.",
+              "attribute": "header-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "prefixIcon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The leading icon that is displayed before the header text.",
+              "attribute": "prefix-icon"
+            },
+            {
+              "kind": "method",
+              "name": "handleHeaderClick",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
+            },
+            {
+              "kind": "method",
+              "name": "dispatchHeaderClickEvent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The KeyboardEvent fired."
+                }
+              ],
+              "description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
+            },
+            {
+              "kind": "method",
+              "name": "renderIcon",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "iconName",
+                  "optional": true,
+                  "type": {
+                    "text": "IconNames"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderHeadingText",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHeader",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getArrowIconName",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon."
+            },
+            {
+              "kind": "method",
+              "name": "renderBody",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onShown) This event is triggered when the accordion button is expanded.",
+              "name": "shown",
+              "reactName": "onShown"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "fieldName": "size"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'default'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "data-aria-level",
+              "type": {
+                "text": "number"
+              },
+              "description": "The aria level of the accordion component.",
+              "default": "3",
+              "fieldName": "dataAriaLevel"
+            },
+            {
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The visibility of the accordion button.",
+              "default": "false",
+              "fieldName": "expanded"
+            },
+            {
+              "name": "header-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text of the accordion item.",
+              "fieldName": "headerText"
+            },
+            {
+              "name": "prefix-icon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The leading icon that is displayed before the header text.",
+              "fieldName": "prefixIcon"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "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 */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "AccordionButton",
+            "module": "components/accordionbutton/accordionbutton.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/accordiongroup/accordiongroup.component.js",
@@ -1246,346 +1622,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/accordionbutton/accordionbutton.component.js",
-      "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.",
-          "name": "AccordionButton",
-          "cssProperties": [
-            {
-              "description": "The border color of the accordion button.",
-              "name": "--mdc-accordionbutton-border-color"
-            },
-            {
-              "description": "The hover color of the accordion button.",
-              "name": "--mdc-accordionbutton-hover-color"
-            },
-            {
-              "description": "The active color of the accordion button.",
-              "name": "--mdc-accordionbutton-active-color"
-            },
-            {
-              "description": "The disabled color of the accordion button.",
-              "name": "--mdc-accordionbutton-disabled-color"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The body section of the accordion button.",
-              "name": "body-section"
-            },
-            {
-              "description": "The header button section of the accordion button.",
-              "name": "header-button-section"
-            },
-            {
-              "description": "The header section of the accordion button.",
-              "name": "header-section"
-            },
-            {
-              "description": "The leading header of the accordion button.",
-              "name": "leading-header"
-            },
-            {
-              "description": "The trailing header of the accordion button.",
-              "name": "trailing-header"
-            },
-            {
-              "description": "The trailing header icon of the accordion button.",
-              "name": "trailing-header__icon"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'default'",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dataAriaLevel",
-              "type": {
-                "text": "number"
-              },
-              "description": "The aria level of the accordion component.",
-              "default": "3",
-              "attribute": "data-aria-level",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "expanded",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The visibility of the accordion button.",
-              "default": "false",
-              "attribute": "expanded",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "headerText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The header text of the accordion item.",
-              "attribute": "header-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "prefixIcon",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "The leading icon that is displayed before the header text.",
-              "attribute": "prefix-icon"
-            },
-            {
-              "kind": "method",
-              "name": "handleHeaderClick",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
-            },
-            {
-              "kind": "method",
-              "name": "dispatchHeaderClickEvent",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The KeyboardEvent fired."
-                }
-              ],
-              "description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
-            },
-            {
-              "kind": "method",
-              "name": "renderIcon",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult | typeof nothing"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "iconName",
-                  "optional": true,
-                  "type": {
-                    "text": "IconNames"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "renderHeadingText",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult | typeof nothing"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderHeader",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getArrowIconName",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon."
-            },
-            {
-              "kind": "method",
-              "name": "renderBody",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult | typeof nothing"
-                }
-              }
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
-              }
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onShown) This event is triggered when the accordion button is expanded.",
-              "name": "shown",
-              "reactName": "onShown"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "fieldName": "size"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'default'",
-              "fieldName": "variant"
-            },
-            {
-              "name": "data-aria-level",
-              "type": {
-                "text": "number"
-              },
-              "description": "The aria level of the accordion component.",
-              "default": "3",
-              "fieldName": "dataAriaLevel"
-            },
-            {
-              "name": "expanded",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The visibility of the accordion button.",
-              "default": "false",
-              "fieldName": "expanded"
-            },
-            {
-              "name": "header-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The header text of the accordion item.",
-              "fieldName": "headerText"
-            },
-            {
-              "name": "prefix-icon",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "The leading icon that is displayed before the header text.",
-              "fieldName": "prefixIcon"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "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 */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "AccordionButton",
-            "module": "components/accordionbutton/accordionbutton.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/animation/animation.component.js",
@@ -31597,7 +31633,8 @@
               },
               "default": "''",
               "description": "Aria label for the show password icon button.",
-              "attribute": "show-button-aria-label"
+              "attribute": "show-button-aria-label",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -31607,7 +31644,8 @@
               },
               "default": "''",
               "description": "Aria label for the hide password icon button.",
-              "attribute": "hide-button-aria-label"
+              "attribute": "hide-button-aria-label",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -42787,6 +42825,303 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/stepperitem/stepperitem.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\nIt can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\nThe component supports various visual styles and can be customized with labels, help text, and step numbers.\n\nThis is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\nMake sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n\nAdditionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.",
+          "name": "StepperItem",
+          "cssProperties": [
+            {
+              "description": "The background color of the status container.",
+              "name": "--mdc-stepperitem-status-container-background"
+            },
+            {
+              "description": "The border color of the status container.",
+              "name": "--mdc-stepperitem-status-container-border-color"
+            },
+            {
+              "description": "The color of the label text.",
+              "name": "--mdc-stepperitem-label-color"
+            },
+            {
+              "description": "The color of the optional label text.",
+              "name": "--mdc-stepperitem-help-text-color"
+            },
+            {
+              "description": "The background color of the label container.",
+              "name": "--mdc-stepperitem-label-container-background"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The container for the status icon or step number.",
+              "name": "status-container"
+            },
+            {
+              "description": "The container for the label and help text.",
+              "name": "label-container"
+            },
+            {
+              "description": "The container for the help text and error icon when applicable.",
+              "name": "help-text-container"
+            },
+            {
+              "description": "The icon representing the status of the stepper item.",
+              "name": "status-icon"
+            },
+            {
+              "description": "The text representing the step number.",
+              "name": "step-number"
+            },
+            {
+              "description": "The text representing the label of the stepper item.",
+              "name": "label"
+            },
+            {
+              "description": "The text providing additional information about the stepper item.",
+              "name": "help-text"
+            },
+            {
+              "description": "The icon representing an error in the stepper item.",
+              "name": "help-icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "VariantType"
+              },
+              "description": "The variant of the stepper item, which can be `inline` or `stacked`.",
+              "default": "'inline'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "status",
+              "type": {
+                "text": "StatusType"
+              },
+              "description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
+              "default": "'not-started'",
+              "attribute": "status",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label for the stepper item, which is displayed as the main text of the step.\nThis label is typically used to describe the step or action that the step represents.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Additional informational text that appears below the label\nThis text is optional and can be used to provide more context or instructions for the step.",
+              "default": "''",
+              "attribute": "help-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "stepNumber",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The step number for the stepper item, which is displayed as a numeric indicator of the step's position in the sequence.\nThis is useful for indicating the order of steps in a process.",
+              "default": "''",
+              "attribute": "step-number",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the stepperitem.\nIf the key is 'Enter' or 'Space', the stepperitem is pressed.\nIf the key is 'Enter', the stepperitem is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the stepperitem's default is prevent to avoid scrolling etc in the host application."
+            },
+            {
+              "kind": "method",
+              "name": "triggerClickEvent",
+              "privacy": "private",
+              "description": "Triggers a click event on the stepper item."
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyUp",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keyup event on the stepperitem.\nIf the key is 'Enter' or 'Space', the stepperitem is clicked.\nIf the key is 'Space', the stepperitem is pressed. The native HTML button works in the same way."
+            },
+            {
+              "kind": "method",
+              "name": "renderStatusIcon",
+              "privacy": "private",
+              "description": "Renders the status icon based on the current status of the stepper item.\n- If the status is `completed`, it renders a check icon.\n- If the status is `current` or `error-current`, it renders a pencil icon.\n- If the status is `not-started` or `error-incomplete`, it renders the step number.\n- If the status is anything else, it renders nothing.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelpText",
+              "privacy": "private",
+              "description": "Renders the help text for the stepper item.\nIf the `helpText` property is not set, it returns nothing.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onClick) This event is dispatched when the stepperitem is clicked.",
+              "name": "click",
+              "reactName": "onClick"
+            },
+            {
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.",
+              "name": "keydown",
+              "reactName": "onKeyDown"
+            },
+            {
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the stepperitem.",
+              "name": "keyup",
+              "reactName": "onKeyUp"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "VariantType"
+              },
+              "description": "The variant of the stepper item, which can be `inline` or `stacked`.",
+              "default": "'inline'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "status",
+              "type": {
+                "text": "StatusType"
+              },
+              "description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
+              "default": "'not-started'",
+              "fieldName": "status"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label for the stepper item, which is displayed as the main text of the step.\nThis label is typically used to describe the step or action that the step represents.",
+              "fieldName": "label"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Additional informational text that appears below the label\nThis text is optional and can be used to provide more context or instructions for the step.",
+              "default": "''",
+              "fieldName": "helpText"
+            },
+            {
+              "name": "step-number",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The step number for the stepper item, which is displayed as a numeric indicator of the step's position in the sequence.\nThis is useful for indicating the order of steps in a process.",
+              "default": "''",
+              "fieldName": "stepNumber"
+            },
+            {
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "TabIndexMixin",
+              "module": "/src/utils/mixins/TabIndexMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-stepperitem",
+          "jsDoc": "/**\n * stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\n * It can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\n * The component supports various visual styles and can be customized with labels, help text, and step numbers.\n *\n * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\n * Make sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n *\n * Additionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-stepperitem\n *\n * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.\n *\n * @csspart status-container - The container for the status icon or step number.\n * @csspart label-container - The container for the label and help text.\n * @csspart help-text-container - The container for the help text and error icon when applicable.\n * @csspart status-icon - The icon representing the status of the stepper item.\n * @csspart step-number - The text representing the step number.\n * @csspart label - The text representing the label of the stepper item.\n * @csspart help-text - The text providing additional information about the stepper item.\n * @csspart help-icon - The icon representing an error in the stepper item.\n *\n * @cssproperty --mdc-stepperitem-status-container-background - The background color of the status container.\n * @cssproperty --mdc-stepperitem-status-container-border-color - The border color of the status container.\n * @cssproperty --mdc-stepperitem-label-color - The color of the label text.\n * @cssproperty --mdc-stepperitem-help-text-color - The color of the optional label text.\n * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "StepperItem",
+            "module": "components/stepperitem/stepperitem.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/tab/tab.component.js",
@@ -43704,303 +44039,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/stepperitem/stepperitem.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\nIt can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\nThe component supports various visual styles and can be customized with labels, help text, and step numbers.\n\nThis is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\nMake sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n\nAdditionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.",
-          "name": "StepperItem",
-          "cssProperties": [
-            {
-              "description": "The background color of the status container.",
-              "name": "--mdc-stepperitem-status-container-background"
-            },
-            {
-              "description": "The border color of the status container.",
-              "name": "--mdc-stepperitem-status-container-border-color"
-            },
-            {
-              "description": "The color of the label text.",
-              "name": "--mdc-stepperitem-label-color"
-            },
-            {
-              "description": "The color of the optional label text.",
-              "name": "--mdc-stepperitem-help-text-color"
-            },
-            {
-              "description": "The background color of the label container.",
-              "name": "--mdc-stepperitem-label-container-background"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The container for the status icon or step number.",
-              "name": "status-container"
-            },
-            {
-              "description": "The container for the label and help text.",
-              "name": "label-container"
-            },
-            {
-              "description": "The container for the help text and error icon when applicable.",
-              "name": "help-text-container"
-            },
-            {
-              "description": "The icon representing the status of the stepper item.",
-              "name": "status-icon"
-            },
-            {
-              "description": "The text representing the step number.",
-              "name": "step-number"
-            },
-            {
-              "description": "The text representing the label of the stepper item.",
-              "name": "label"
-            },
-            {
-              "description": "The text providing additional information about the stepper item.",
-              "name": "help-text"
-            },
-            {
-              "description": "The icon representing an error in the stepper item.",
-              "name": "help-icon"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "VariantType"
-              },
-              "description": "The variant of the stepper item, which can be `inline` or `stacked`.",
-              "default": "'inline'",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "status",
-              "type": {
-                "text": "StatusType"
-              },
-              "description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
-              "default": "'not-started'",
-              "attribute": "status",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The label for the stepper item, which is displayed as the main text of the step.\nThis label is typically used to describe the step or action that the step represents.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "helpText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Additional informational text that appears below the label\nThis text is optional and can be used to provide more context or instructions for the step.",
-              "default": "''",
-              "attribute": "help-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "stepNumber",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The step number for the stepper item, which is displayed as a numeric indicator of the step's position in the sequence.\nThis is useful for indicating the order of steps in a process.",
-              "default": "''",
-              "attribute": "step-number",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the stepperitem.\nIf the key is 'Enter' or 'Space', the stepperitem is pressed.\nIf the key is 'Enter', the stepperitem is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the stepperitem's default is prevent to avoid scrolling etc in the host application."
-            },
-            {
-              "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "private",
-              "description": "Triggers a click event on the stepper item."
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyUp",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keyup event on the stepperitem.\nIf the key is 'Enter' or 'Space', the stepperitem is clicked.\nIf the key is 'Space', the stepperitem is pressed. The native HTML button works in the same way."
-            },
-            {
-              "kind": "method",
-              "name": "renderStatusIcon",
-              "privacy": "private",
-              "description": "Renders the status icon based on the current status of the stepper item.\n- If the status is `completed`, it renders a check icon.\n- If the status is `current` or `error-current`, it renders a pencil icon.\n- If the status is `not-started` or `error-incomplete`, it renders the step number.\n- If the status is anything else, it renders nothing.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderHelpText",
-              "privacy": "private",
-              "description": "Renders the help text for the stepper item.\nIf the `helpText` property is not set, it returns nothing.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "utils/mixins/TabIndexMixin.js"
-              }
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onClick) This event is dispatched when the stepperitem is clicked.",
-              "name": "click",
-              "reactName": "onClick"
-            },
-            {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.",
-              "name": "keydown",
-              "reactName": "onKeyDown"
-            },
-            {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the stepperitem.",
-              "name": "keyup",
-              "reactName": "onKeyUp"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "VariantType"
-              },
-              "description": "The variant of the stepper item, which can be `inline` or `stacked`.",
-              "default": "'inline'",
-              "fieldName": "variant"
-            },
-            {
-              "name": "status",
-              "type": {
-                "text": "StatusType"
-              },
-              "description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
-              "default": "'not-started'",
-              "fieldName": "status"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The label for the stepper item, which is displayed as the main text of the step.\nThis label is typically used to describe the step or action that the step represents.",
-              "fieldName": "label"
-            },
-            {
-              "name": "help-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Additional informational text that appears below the label\nThis text is optional and can be used to provide more context or instructions for the step.",
-              "default": "''",
-              "fieldName": "helpText"
-            },
-            {
-              "name": "step-number",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The step number for the stepper item, which is displayed as a numeric indicator of the step's position in the sequence.\nThis is useful for indicating the order of steps in a process.",
-              "default": "''",
-              "fieldName": "stepNumber"
-            },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
-              "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "src/utils/mixins/TabIndexMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "TabIndexMixin",
-              "module": "/src/utils/mixins/TabIndexMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-stepperitem",
-          "jsDoc": "/**\n * stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\n * It can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\n * The component supports various visual styles and can be customized with labels, help text, and step numbers.\n *\n * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\n * Make sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n *\n * Additionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-stepperitem\n *\n * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.\n *\n * @csspart status-container - The container for the status icon or step number.\n * @csspart label-container - The container for the label and help text.\n * @csspart help-text-container - The container for the help text and error icon when applicable.\n * @csspart status-icon - The icon representing the status of the stepper item.\n * @csspart step-number - The text representing the step number.\n * @csspart label - The text representing the label of the stepper item.\n * @csspart help-text - The text providing additional information about the stepper item.\n * @csspart help-icon - The icon representing an error in the stepper item.\n *\n * @cssproperty --mdc-stepperitem-status-container-background - The background color of the status container.\n * @cssproperty --mdc-stepperitem-status-container-border-color - The border color of the status container.\n * @cssproperty --mdc-stepperitem-label-color - The color of the label text.\n * @cssproperty --mdc-stepperitem-help-text-color - The color of the optional label text.\n * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "StepperItem",
-            "module": "components/stepperitem/stepperitem.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/tablist/tablist.component.js",