@momentum-design/components 0.53.3 → 0.53.5

package/dist/custom-elements.json

@@ -83,10 +83,10 @@
               "kind": "field",
               "name": "active",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
               "attribute": "active",
               "reflects": true,
               "inheritedFrom": {
@@ -98,10 +98,10 @@
               "kind": "field",
               "name": "softDisabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
               "attribute": "soft-disabled",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -135,6 +135,18 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "ariaStateKey",
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed'",
+              "attribute": "ariaStateKey",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "type",
@@ -173,13 +185,14 @@
                 },
                 {
                   "name": "active",
+                  "optional": true,
                   "type": {
                     "text": "boolean"
                   },
                   "description": "The active state of the element"
                 }
               ],
-              "description": "Sets the aria-pressed attribute based on the active state of the button.",
+              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
               "inheritedFrom": {
                 "name": "Buttonsimple",
                 "module": "components/buttonsimple/buttonsimple.component.js"
@@ -199,6 +212,7 @@
                 },
                 {
                   "name": "softDisabled",
+                  "optional": true,
                   "type": {
                     "text": "boolean"
                   },
@@ -343,10 +357,10 @@
             {
               "name": "active",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
               "fieldName": "active",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -356,10 +370,10 @@
             {
               "name": "soft-disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
               "fieldName": "softDisabled",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -389,6 +403,16 @@
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
+            {
+              "name": "ariaStateKey",
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed'",
+              "fieldName": "ariaStateKey",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
             {
               "name": "type",
               "type": {
@@ -940,10 +964,10 @@
               "kind": "field",
               "name": "active",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
               "attribute": "active",
               "reflects": true,
               "inheritedFrom": {
@@ -955,10 +979,10 @@
               "kind": "field",
               "name": "softDisabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
               "attribute": "soft-disabled",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -977,6 +1001,18 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "ariaStateKey",
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed'",
+              "attribute": "ariaStateKey",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "type",
@@ -1015,13 +1051,14 @@
                 },
                 {
                   "name": "active",
+                  "optional": true,
                   "type": {
                     "text": "boolean"
                   },
                   "description": "The active state of the element"
                 }
               ],
-              "description": "Sets the aria-pressed attribute based on the active state of the button.",
+              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
               "inheritedFrom": {
                 "name": "Buttonsimple",
                 "module": "components/buttonsimple/buttonsimple.component.js"
@@ -1041,6 +1078,7 @@
                 },
                 {
                   "name": "softDisabled",
+                  "optional": true,
                   "type": {
                     "text": "boolean"
                   },
@@ -1300,10 +1338,10 @@
             {
               "name": "active",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
               "fieldName": "active",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -1313,10 +1351,10 @@
             {
               "name": "soft-disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
               "fieldName": "softDisabled",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -1333,6 +1371,16 @@
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
+            {
+              "name": "ariaStateKey",
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed'",
+              "fieldName": "ariaStateKey",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
             {
               "name": "type",
               "type": {
@@ -1892,7 +1940,7 @@
               "kind": "field",
               "name": "prefixIcon",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | undefined"
               },
               "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
               "attribute": "prefix-icon",
@@ -1902,7 +1950,7 @@
               "kind": "field",
               "name": "postfixIcon",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | undefined"
               },
               "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
               "attribute": "postfix-icon",
@@ -1965,6 +2013,7 @@
               "parameters": [
                 {
                   "name": "active",
+                  "optional": true,
                   "type": {
                     "text": "boolean"
                   },
@@ -2064,10 +2113,10 @@
               "kind": "field",
               "name": "active",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
               "attribute": "active",
               "reflects": true,
               "inheritedFrom": {
@@ -2079,16 +2128,28 @@
               "kind": "field",
               "name": "softDisabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
               "attribute": "soft-disabled",
               "inheritedFrom": {
                 "name": "Buttonsimple",
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "ariaStateKey",
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed'",
+              "attribute": "ariaStateKey",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "type",
@@ -2127,13 +2188,14 @@
                 },
                 {
                   "name": "active",
+                  "optional": true,
                   "type": {
                     "text": "boolean"
                   },
                   "description": "The active state of the element"
                 }
               ],
-              "description": "Sets the aria-pressed attribute based on the active state of the button.",
+              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
               "inheritedFrom": {
                 "name": "Buttonsimple",
                 "module": "components/buttonsimple/buttonsimple.component.js"
@@ -2153,6 +2215,7 @@
                 },
                 {
                   "name": "softDisabled",
+                  "optional": true,
                   "type": {
                     "text": "boolean"
                   },
@@ -2253,7 +2316,7 @@
             {
               "name": "prefix-icon",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | undefined"
               },
               "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
               "fieldName": "prefixIcon"
@@ -2261,7 +2324,7 @@
             {
               "name": "postfix-icon",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | undefined"
               },
               "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
               "fieldName": "postfixIcon"
@@ -2339,10 +2402,10 @@
             {
               "name": "active",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
               "fieldName": "active",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -2352,16 +2415,26 @@
             {
               "name": "soft-disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
               "fieldName": "softDisabled",
               "inheritedFrom": {
                 "name": "Buttonsimple",
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
+            {
+              "name": "ariaStateKey",
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed'",
+              "fieldName": "ariaStateKey",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
             {
               "name": "type",
               "type": {
@@ -2447,10 +2520,10 @@
               "kind": "field",
               "name": "active",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
               "attribute": "active",
               "reflects": true
             },
@@ -2458,10 +2531,10 @@
               "kind": "field",
               "name": "softDisabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
               "attribute": "soft-disabled"
             },
             {
@@ -2483,6 +2556,14 @@
               "attribute": "role",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "ariaStateKey",
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed'",
+              "attribute": "ariaStateKey",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "type",
@@ -2513,13 +2594,14 @@
                 },
                 {
                   "name": "active",
+                  "optional": true,
                   "type": {
                     "text": "boolean"
                   },
                   "description": "The active state of the element"
                 }
               ],
-              "description": "Sets the aria-pressed attribute based on the active state of the button."
+              "description": "Sets the ariaStateKey attributes based on the active state of the button."
             },
             {
               "kind": "method",
@@ -2535,6 +2617,7 @@
                 },
                 {
                   "name": "softDisabled",
+                  "optional": true,
                   "type": {
                     "text": "boolean"
                   },
@@ -2663,19 +2746,19 @@
             {
               "name": "active",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
               "fieldName": "active"
             },
             {
               "name": "soft-disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
               "fieldName": "softDisabled"
             },
             {
@@ -2693,6 +2776,12 @@
               "default": "button",
               "fieldName": "role"
             },
+            {
+              "name": "ariaStateKey",
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed'",
+              "fieldName": "ariaStateKey"
+            },
             {
               "name": "type",
               "type": {
@@ -3520,10 +3609,10 @@
               "kind": "field",
               "name": "active",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
               "attribute": "active",
               "reflects": true,
               "inheritedFrom": {
@@ -3535,10 +3624,10 @@
               "kind": "field",
               "name": "softDisabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
               "attribute": "soft-disabled",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -3572,6 +3661,18 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "ariaStateKey",
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed'",
+              "attribute": "ariaStateKey",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "type",
@@ -3610,13 +3711,14 @@
                 },
                 {
                   "name": "active",
+                  "optional": true,
                   "type": {
                     "text": "boolean"
                   },
                   "description": "The active state of the element"
                 }
               ],
-              "description": "Sets the aria-pressed attribute based on the active state of the button.",
+              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
               "inheritedFrom": {
                 "name": "Buttonsimple",
                 "module": "components/buttonsimple/buttonsimple.component.js"
@@ -3636,6 +3738,7 @@
                 },
                 {
                   "name": "softDisabled",
+                  "optional": true,
                   "type": {
                     "text": "boolean"
                   },
@@ -3792,10 +3895,10 @@
             {
               "name": "active",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
               "fieldName": "active",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -3805,10 +3908,10 @@
             {
               "name": "soft-disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
               "fieldName": "softDisabled",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -3838,6 +3941,16 @@
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
+            {
+              "name": "ariaStateKey",
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed'",
+              "fieldName": "ariaStateKey",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
             {
               "name": "type",
               "type": {
@@ -5909,10 +6022,10 @@
               "kind": "field",
               "name": "active",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
               "attribute": "active",
               "reflects": true,
               "inheritedFrom": {
@@ -5924,10 +6037,10 @@
               "kind": "field",
               "name": "softDisabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
               "attribute": "soft-disabled",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -5961,6 +6074,18 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "ariaStateKey",
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed'",
+              "attribute": "ariaStateKey",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "type",
@@ -5990,13 +6115,14 @@
                 },
                 {
                   "name": "active",
+                  "optional": true,
                   "type": {
                     "text": "boolean"
                   },
                   "description": "The active state of the element"
                 }
               ],
-              "description": "Sets the aria-pressed attribute based on the active state of the button.",
+              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
               "inheritedFrom": {
                 "name": "Buttonsimple",
                 "module": "components/buttonsimple/buttonsimple.component.js"
@@ -6016,6 +6142,7 @@
                 },
                 {
                   "name": "softDisabled",
+                  "optional": true,
                   "type": {
                     "text": "boolean"
                   },
@@ -6189,10 +6316,10 @@
             {
               "name": "active",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
               "fieldName": "active",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -6202,10 +6329,10 @@
             {
               "name": "soft-disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
               "fieldName": "softDisabled",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -6235,6 +6362,16 @@
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
+            {
+              "name": "ariaStateKey",
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed'",
+              "fieldName": "ariaStateKey",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
             {
               "name": "type",
               "type": {
@@ -8906,59 +9043,268 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/listitem/listitem.component.js",
+      "path": "components/marker/marker.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-listitem component is used to display a label with different types of controls.\nThere can be three types of controls, a radio button, a checkbox on the\nleading side and a toggle on the trailing side.\nThe list item can contain an avatar on the leading side and a badge on the trailing side.\nAdditionally, the list item can contain a side header and a subline text.\n\nThe leading and trailing slots can be used to display controls and text. <br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\nPlease use mdc-list as a parent element even when there is only listitem for a11y purpose.",
-          "name": "ListItem",
+          "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+          "name": "Marker",
           "cssProperties": [
             {
-              "description": "Allows customization of the default background color.",
-              "name": "--mdc-listitem-default-background-color"
-            },
-            {
-              "description": "Allows customization of the background color on hover.",
-              "name": "--mdc-listitem-background-color-hover"
-            },
-            {
-              "description": "Allows customization of the background color when pressed.",
-              "name": "--mdc-listitem-background-color-active"
-            },
-            {
-              "description": "Allows customization of the primary label, side header and subline text slot color.",
-              "name": "--mdc-listitem-primary-label-color"
+              "description": "Allows customization of the default background color in solid variant.",
+              "name": "--mdc-marker-solid-background-color"
             },
             {
-              "description": "Allows customization of the secondary and tertiary label text slot color.",
-              "name": "--mdc-listitem-secondary-label-color"
+              "description": "Allows customization of the default stripes in striped variant.",
+              "name": "--mdc-marker-striped-color"
             },
             {
-              "description": "Allows customization of the disabled color.",
-              "name": "--mdc-listitem-disabled-color"
+              "description": "Allows customization of the default background color in striped variant.",
+              "name": "--mdc-marker-striped-background-color"
             },
             {
-              "description": "Allows customization of column gap.",
-              "name": "--mdc-listitem-column-gap"
+              "description": "Allows customization of the default width.",
+              "name": "--mdc-marker-width"
             }
           ],
-          "slots": [
-            {
-              "description": "slot for list item controls to appear of leading end.",
-              "name": "leading-controls"
-            },
-            {
-              "description": "slot for list item primary label.",
-              "name": "leading-text-primary-label"
-            },
+          "members": [
             {
-              "description": "slot for list item secondary label.",
-              "name": "leading-text-secondary-label"
-            },
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "MarkerVariants"
+              },
+              "privacy": "public",
+              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+              "default": "solid",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
             {
-              "description": "slot for list item tertiary label.",
-              "name": "leading-text-tertiary-label"
-            },
+              "name": "variant",
+              "type": {
+                "text": "MarkerVariants"
+              },
+              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+              "default": "solid",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-marker",
+          "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Marker",
+            "module": "components/marker/marker.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/optgroup/optgroup.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "optgroup component, which creates a grouping of mdc-option within a listbox element.",
+          "name": "OptGroup",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the disabled option color.",
+              "name": "--mdc-optgroup-disabled-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default slot for mdc-option elements.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text to be displayed on the top of the options list.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "setDisabledForAllOptions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
+              }
+            },
+            {
+              "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"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text to be displayed on the top of the options list.",
+              "fieldName": "label"
+            },
+            {
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+              }
+            },
+            {
+              "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": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
+            },
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-optgroup",
+          "jsDoc": "/**\n * optgroup component, which creates a grouping of mdc-option within a listbox element.\n *\n * @dependency mdc-text\n *\n * @tagname mdc-optgroup\n *\n * @slot default - This is a default slot for mdc-option elements.\n *\n * @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "OptGroup",
+            "module": "components/optgroup/optgroup.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/listitem/listitem.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-listitem component is used to display a label with different types of controls.\nThere can be three types of controls, a radio button, a checkbox on the\nleading side and a toggle on the trailing side.\nThe list item can contain an avatar on the leading side and a badge on the trailing side.\nAdditionally, the list item can contain a side header and a subline text.\n\nThe leading and trailing slots can be used to display controls and text. <br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\nPlease use mdc-list as a parent element even when there is only listitem for a11y purpose.",
+          "name": "ListItem",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the default background color.",
+              "name": "--mdc-listitem-default-background-color"
+            },
+            {
+              "description": "Allows customization of the background color on hover.",
+              "name": "--mdc-listitem-background-color-hover"
+            },
+            {
+              "description": "Allows customization of the background color when pressed.",
+              "name": "--mdc-listitem-background-color-active"
+            },
+            {
+              "description": "Allows customization of the primary label, side header and subline text slot color.",
+              "name": "--mdc-listitem-primary-label-color"
+            },
+            {
+              "description": "Allows customization of the secondary and tertiary label text slot color.",
+              "name": "--mdc-listitem-secondary-label-color"
+            },
+            {
+              "description": "Allows customization of the disabled color.",
+              "name": "--mdc-listitem-disabled-color"
+            },
+            {
+              "description": "Allows customization of column gap.",
+              "name": "--mdc-listitem-column-gap"
+            }
+          ],
+          "slots": [
+            {
+              "description": "slot for list item controls to appear of leading end.",
+              "name": "leading-controls"
+            },
+            {
+              "description": "slot for list item primary label.",
+              "name": "leading-text-primary-label"
+            },
+            {
+              "description": "slot for list item secondary label.",
+              "name": "leading-text-secondary-label"
+            },
+            {
+              "description": "slot for list item tertiary label.",
+              "name": "leading-text-tertiary-label"
+            },
             {
               "description": "slot for list item side header text.",
               "name": "trailing-text-side-header"
@@ -9281,215 +9627,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/marker/marker.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-          "name": "Marker",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default background color in solid variant.",
-              "name": "--mdc-marker-solid-background-color"
-            },
-            {
-              "description": "Allows customization of the default stripes in striped variant.",
-              "name": "--mdc-marker-striped-color"
-            },
-            {
-              "description": "Allows customization of the default background color in striped variant.",
-              "name": "--mdc-marker-striped-background-color"
-            },
-            {
-              "description": "Allows customization of the default width.",
-              "name": "--mdc-marker-width"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "MarkerVariants"
-              },
-              "privacy": "public",
-              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-              "default": "solid",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "MarkerVariants"
-              },
-              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-              "default": "solid",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-marker",
-          "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Marker",
-            "module": "components/marker/marker.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/optgroup/optgroup.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "optgroup component, which creates a grouping of mdc-option within a listbox element.",
-          "name": "OptGroup",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the disabled option color.",
-              "name": "--mdc-optgroup-disabled-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "This is a default slot for mdc-option elements.",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The header text to be displayed on the top of the options list.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "setDisabledForAllOptions",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
-              }
-            },
-            {
-              "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"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The header text to be displayed on the top of the options list.",
-              "fieldName": "label"
-            },
-            {
-              "name": "data-aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
-              }
-            },
-            {
-              "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": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
-            },
-            {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-optgroup",
-          "jsDoc": "/**\n * optgroup component, which creates a grouping of mdc-option within a listbox element.\n *\n * @dependency mdc-text\n *\n * @tagname mdc-optgroup\n *\n * @slot default - This is a default slot for mdc-option elements.\n *\n * @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "OptGroup",
-            "module": "components/optgroup/optgroup.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/option/option.component.js",
@@ -16364,6 +16501,21 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "The tab's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the tab is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the tab is in an inactive state, indicating it is toggled off.\n\nThis attribute also controls the \"aria-selected\" attribute of the tab.\nWhen the tab is active, \"aria-selected\" is set to true, indicating that the tab is selected.\nWhen the tab is inactive, \"aria-selected\" is set to false, indicating that the tab is not selected.",
+              "default": "false",
+              "attribute": "active",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "text",
@@ -16526,29 +16678,14 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
-              "attribute": "active",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "softDisabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
               "attribute": "soft-disabled",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -16582,6 +16719,18 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "ariaStateKey",
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed'",
+              "attribute": "ariaStateKey",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "type",
@@ -16611,6 +16760,7 @@
                 },
                 {
                   "name": "softDisabled",
+                  "optional": true,
                   "type": {
                     "text": "boolean"
                   },
@@ -16751,6 +16901,19 @@
             }
           ],
           "attributes": [
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "The tab's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the tab is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the tab is in an inactive state, indicating it is toggled off.\n\nThis attribute also controls the \"aria-selected\" attribute of the tab.\nWhen the tab is active, \"aria-selected\" is set to true, indicating that the tab is selected.\nWhen the tab is inactive, \"aria-selected\" is set to false, indicating that the tab is not selected.",
+              "default": "false",
+              "fieldName": "active",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
             {
               "name": "text",
               "type": {
@@ -16815,26 +16978,13 @@
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
-            {
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
-              "fieldName": "active",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
             {
               "name": "soft-disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
               "fieldName": "softDisabled",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -16864,6 +17014,16 @@
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
+            {
+              "name": "ariaStateKey",
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed'",
+              "fieldName": "ariaStateKey",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
             {
               "name": "type",
               "type": {