@momentum-design/components 0.129.8 → 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
         }
       ],
@@ -45660,212 +45660,64 @@
           "name": "Tab",
           "cssProperties": [
             {
-              "description": "Height for button size",
-              "name": "--mdc-button-height",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "Gap between the badge(if provided), icon and text.",
-              "name": "--mdc-tab-content-gap"
-            },
-            {
-              "description": "Height of the tab.",
+              "description": "The height of the tab.",
               "name": "--mdc-tab-height"
             },
             {
-              "description": "Background color for active glass tab in disabled state.",
-              "name": "--mdc-tab-glass-active-background-color-disabled"
-            },
-            {
-              "description": "Background color for active glass tab in hover state.",
-              "name": "--mdc-tab-glass-active-background-color-hover"
-            },
-            {
-              "description": "Background color for active glass tab in rest state.",
-              "name": "--mdc-tab-glass-active-background-color-normal"
-            },
-            {
-              "description": "Background color for active glass tab in pressed state.",
-              "name": "--mdc-tab-glass-active-background-color-pressed"
-            },
-            {
-              "description": "Text and icon color for active glass tab.",
-              "name": "--mdc-tab-glass-active-color"
-            },
-            {
-              "description": "Text and icon color for active glass tab in disabled state.",
-              "name": "--mdc-tab-glass-active-color-disabled"
-            },
-            {
-              "description": "Border radius for glass tab.",
-              "name": "--mdc-tab-glass-border-radius"
-            },
-            {
-              "description": "Background color for inactive glass tab in disabled state.",
-              "name": "--mdc-tab-glass-inactive-background-color-disabled"
-            },
-            {
-              "description": "Background color for inactive glass tab in hover state.",
-              "name": "--mdc-tab-glass-inactive-background-color-hover"
-            },
-            {
-              "description": "Background color for inactive glass tab in rest state.",
-              "name": "--mdc-tab-glass-inactive-background-color-normal"
-            },
-            {
-              "description": "Background color for inactive glass tab in pressed state.",
-              "name": "--mdc-tab-glass-inactive-background-color-pressed"
-            },
-            {
-              "description": "Text and icon color for inactive glass tab.",
-              "name": "--mdc-tab-glass-inactive-color"
-            },
-            {
-              "description": "Text and icon color for inactive glass tab in disabled state.",
-              "name": "--mdc-tab-glass-inactive-color-disabled"
-            },
-            {
-              "description": "Background color for active line tab in pressed state.",
-              "name": "--mdc-tab-line-active-background-color-pressed"
-            },
-            {
-              "description": "Background color for active line tab in disabled state.",
-              "name": "--mdc-tab-line-active-background-color-disabled"
-            },
-            {
-              "description": "Background color for active line tab in hover state.",
-              "name": "--mdc-tab-line-active-background-color-hover"
+              "description": "The left padding of the tab.",
+              "name": "--mdc-tab-padding-left"
             },
             {
-              "description": "Background color for active line tab in rest state.",
-              "name": "--mdc-tab-line-active-background-color-normal"
+              "description": "The right padding of the tab.",
+              "name": "--mdc-tab-padding-right"
             },
             {
-              "description": "Text and icon color for active line tab.",
-              "name": "--mdc-tab-line-active-color"
+              "description": "The gap between the icon and text in the tab.",
+              "name": "--mdc-tab-content-gap"
             },
             {
-              "description": "Text and icon color for active line tab in disabled state.",
-              "name": "--mdc-tab-line-active-color-disabled"
+              "description": "The background color of the tab.",
+              "name": "--mdc-tab-background-color"
             },
             {
-              "description": "color for indicator in active line tab.",
-              "name": "--mdc-tab-line-active-indicator-color"
+              "description": "The text color of the tab.",
+              "name": "--mdc-tab-color"
             },
             {
-              "description": "Color for indicator in active line tab in disabled state.",
-              "name": "--mdc-tab-line-active-indicator-color-disabled"
+              "description": "The border radius of the tab.",
+              "name": "--mdc-tab-border-radius"
             },
             {
-              "description": "Height for indicator in active line tab.",
+              "description": "The height of the active indicator line.",
               "name": "--mdc-tab-line-active-indicator-height"
             },
             {
-              "description": "Width for indicator in active line tab.",
+              "description": "The width of the active indicator line.",
               "name": "--mdc-tab-line-active-indicator-width"
             },
             {
-              "description": "Bottom left border radius for line tab.",
+              "description": "The border bottom left radius of the active indicator line.",
               "name": "--mdc-tab-line-border-bottom-left-radius"
             },
             {
-              "description": "Bottom right border radius for line tab.",
+              "description": "The border bottom right radius of the active indicator line.",
               "name": "--mdc-tab-line-border-bottom-right-radius"
             },
             {
-              "description": "Top left border radius for line tab.",
+              "description": "The border top left radius of the active indicator line.",
               "name": "--mdc-tab-line-border-top-left-radius"
             },
             {
-              "description": "Top right border radius for line tab.",
+              "description": "The border top right radius of the active indicator line.",
               "name": "--mdc-tab-line-border-top-right-radius"
             },
             {
-              "description": "Background color for inactive line tab in pressed state.",
-              "name": "--mdc-tab-line-inactive-background-color-pressed"
-            },
-            {
-              "description": "Background color for inactive line tab in disabled state",
-              "name": "--mdc-tab-line-inactive-background-color-disabled"
-            },
-            {
-              "description": "Background color for inactive line tab in hover state.",
-              "name": "--mdc-tab-line-inactive-background-color-hover"
-            },
-            {
-              "description": "Background color for inactive line tab in rest state.",
-              "name": "--mdc-tab-line-inactive-background-color-normal"
-            },
-            {
-              "description": "Text and icon color for inactive line tab.",
-              "name": "--mdc-tab-line-inactive-color"
-            },
-            {
-              "description": "Text and icon color for inactive line tab in disabled state.",
-              "name": "--mdc-tab-line-inactive-color-disabled"
-            },
-            {
-              "description": "Padding left for the tab.",
-              "name": "--mdc-tab-padding-left"
-            },
-            {
-              "description": "Padding right for the tab.",
-              "name": "--mdc-tab-padding-right"
-            },
-            {
-              "description": "Background color for active pill tab in pressed state.",
-              "name": "--mdc-tab-pill-active-background-color-pressed"
-            },
-            {
-              "description": "Background color for active pill tab in disabled state.",
-              "name": "--mdc-tab-pill-active-background-color-disabled"
-            },
-            {
-              "description": "Background color for active pill tab in hover state.",
-              "name": "--mdc-tab-pill-active-background-color-hover"
-            },
-            {
-              "description": "Background color for active pill tab in rest state.",
-              "name": "--mdc-tab-pill-active-background-color-normal"
-            },
-            {
-              "description": "Text and icon color for active pill tab.",
-              "name": "--mdc-tab-pill-active-color"
-            },
-            {
-              "description": "Text and icon color for active pill tab in disabled state.",
-              "name": "--mdc-tab-pill-active-color-disabled"
-            },
-            {
-              "description": "Border radius for pill tab.",
-              "name": "--mdc-tab-pill-border-radius"
-            },
-            {
-              "description": "Background color for inactive pill tab in pressed state.",
-              "name": "--mdc-tab-pill-inactive-background-color-pressed"
-            },
-            {
-              "description": "Background color for inactive pill tab in disabled state.",
-              "name": "--mdc-tab-pill-inactive-background-color-disabled"
-            },
-            {
-              "description": "Background color for inactive pill tab in hover state.",
-              "name": "--mdc-tab-pill-inactive-background-color-hover"
-            },
-            {
-              "description": "Background color for inactive pill tab in rest state.",
-              "name": "--mdc-tab-pill-inactive-background-color-normal"
-            },
-            {
-              "description": "Text and icon color for inactive pill tab.",
-              "name": "--mdc-tab-pill-inactive-color"
-            },
-            {
-              "description": "Text and icon color for inactive pill tab in disabled state.",
-              "name": "--mdc-tab-pill-inactive-color-disabled"
+              "description": "Height for button size",
+              "name": "--mdc-button-height",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
               "description": "Background color of the button",
@@ -46552,7 +46404,7 @@
             "module": "/src/components/buttonsimple/buttonsimple.component"
           },
           "tagName": "mdc-tab",
-          "jsDoc": "/**\n * `mdc-tab` is Tab component to be used within the Tabgroup.\n *\n * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.\n *\n * Pass attribute `tabid` when using inside of `tablist` component.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * The `slot=\"chip\"` can be used to add a chip to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * Note: Icons can be used in conjunction with badges or chips.\n * Badges and chips should not be used at the same time.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the tab is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.\n * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.\n * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes\n * <br />\n * Event Data: `detail: { tabId: this.tabId, active }`\n * <br />\n * Note: the activechange event is used by the tab list component to react to the change in state of the tab,\n * so this event won't be needed if the tab list is used.\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-button-height - Height for button size\n * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.\n * @cssproperty --mdc-tab-height - Height of the tab.\n * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab\n *  in disabled state.\n * @cssproperty --mdc-tab-glass-active-background-color-hover - Background color for active glass tab in hover state.\n * @cssproperty --mdc-tab-glass-active-background-color-normal - Background color for active glass tab in rest state.\n * @cssproperty --mdc-tab-glass-active-background-color-pressed - Background color for active glass tab\n *  in pressed state.\n * @cssproperty --mdc-tab-glass-active-color - Text and icon color for active glass tab.\n * @cssproperty --mdc-tab-glass-active-color-disabled - Text and icon color for active glass tab in disabled state.\n * @cssproperty --mdc-tab-glass-border-radius - Border radius for glass tab.\n * @cssproperty --mdc-tab-glass-inactive-background-color-disabled - Background color for inactive glass tab\n *  in disabled state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-hover - Background color for inactive glass tab\n *  in hover state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-normal - Background color for inactive glass tab\n *  in rest state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-pressed - Background color for inactive glass tab\n *  in pressed state.\n * @cssproperty --mdc-tab-glass-inactive-color - Text and icon color for inactive glass tab.\n * @cssproperty --mdc-tab-glass-inactive-color-disabled - Text and icon color for inactive glass tab in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-pressed - Background color for active line tab in pressed state.\n * @cssproperty --mdc-tab-line-active-background-color-disabled - Background color for active line tab\n *  in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-hover - Background color for active line tab in hover state.\n * @cssproperty --mdc-tab-line-active-background-color-normal - Background color for active line tab in rest state.\n * @cssproperty --mdc-tab-line-active-color - Text and icon color for active line tab.\n * @cssproperty --mdc-tab-line-active-color-disabled - Text and icon color for active line tab in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-color - color for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-color-disabled - Color for indicator in active line tab\n *  in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-height - Height for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-width - Width for indicator in active line tab.\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - Bottom left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - Bottom right border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-left-radius - Top left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-right-radius - Top right border radius for line tab.\n * @cssproperty --mdc-tab-line-inactive-background-color-pressed - Background color for inactive line tab\n *  in pressed state.\n * @cssproperty --mdc-tab-line-inactive-background-color-disabled - Background color for inactive line tab\n *  in disabled state\n * @cssproperty --mdc-tab-line-inactive-background-color-hover - Background color for inactive line tab in hover state.\n * @cssproperty --mdc-tab-line-inactive-background-color-normal - Background color for inactive line tab\n *  in rest state.\n * @cssproperty --mdc-tab-line-inactive-color - Text and icon color for inactive line tab.\n * @cssproperty --mdc-tab-line-inactive-color-disabled - Text and icon color for inactive line tab in disabled state.\n * @cssproperty --mdc-tab-padding-left - Padding left for the tab.\n * @cssproperty --mdc-tab-padding-right - Padding right for the tab.\n * @cssproperty --mdc-tab-pill-active-background-color-pressed - Background color for active pill tab in pressed state.\n * @cssproperty --mdc-tab-pill-active-background-color-disabled - Background color for active pill tab\n *  in disabled state.\n * @cssproperty --mdc-tab-pill-active-background-color-hover - Background color for active pill tab in hover state.\n * @cssproperty --mdc-tab-pill-active-background-color-normal - Background color for active pill tab in rest state.\n * @cssproperty --mdc-tab-pill-active-color - Text and icon color for active pill tab.\n * @cssproperty --mdc-tab-pill-active-color-disabled - Text and icon color for active pill tab in disabled state.\n * @cssproperty --mdc-tab-pill-border-radius - Border radius for pill tab.\n * @cssproperty --mdc-tab-pill-inactive-background-color-pressed - Background color for inactive pill tab\n *  in pressed state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-disabled - Background color for inactive pill tab\n *  in disabled state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-hover - Background color for inactive pill tab in hover state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.\n * @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.\n * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.\n *\n * @csspart container - The container of the tab.\n * @csspart icon - The icon of the tab.\n * @csspart indicator - The indicator of the tab.\n * @csspart text - The text of the tab.\n */",
+          "jsDoc": "/**\n * `mdc-tab` is Tab component to be used within the Tabgroup.\n *\n * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.\n *\n * Pass attribute `tabid` when using inside of `tablist` component.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * The `slot=\"chip\"` can be used to add a chip to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * Note: Icons can be used in conjunction with badges or chips.\n * Badges and chips should not be used at the same time.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the tab is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.\n * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.\n * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes\n * <br />\n * Event Data: `detail: { tabId: this.tabId, active }`\n * <br />\n * Note: the activechange event is used by the tab list component to react to the change in state of the tab,\n * so this event won't be needed if the tab list is used.\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-tab-height - The height of the tab.\n * @cssproperty --mdc-tab-padding-left - The left padding of the tab.\n * @cssproperty --mdc-tab-padding-right - The right padding of the tab.\n * @cssproperty --mdc-tab-content-gap - The gap between the icon and text in the tab.\n * @cssproperty --mdc-tab-background-color - The background color of the tab.\n * @cssproperty --mdc-tab-color - The text color of the tab.\n * @cssproperty --mdc-tab-border-radius - The border radius of the tab.\n *\n * @cssproperty --mdc-tab-line-active-indicator-height - The height of the active indicator line.\n * @cssproperty --mdc-tab-line-active-indicator-width - The width of the active indicator line.\n *\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - The border bottom left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - The border bottom right radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.\n *\n *\n *\n * @csspart container - The container of the tab.\n * @csspart icon - The icon of the tab.\n * @csspart indicator - The indicator of the tab.\n * @csspart text - The text of the tab.\n */",
           "customElement": true
         }
       ],