@momentum-design/components 0.53.4 → 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": {
@@ -1802,6 +1850,77 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/bullet/bullet.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
+          "name": "Bullet",
+          "cssProperties": [
+            {
+              "description": "background color of the bullet",
+              "name": "--mdc-bullet-background-color"
+            },
+            {
+              "description": "small size value of the bullet",
+              "name": "--mdc-bullet-size-small"
+            },
+            {
+              "description": "medium size value of the bullet",
+              "name": "--mdc-bullet-size-medium"
+            },
+            {
+              "description": "large size value of the bullet",
+              "name": "--mdc-bullet-size-large"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "privacy": "public",
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "attribute": "size",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-bullet",
+          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Bullet",
+            "module": "components/bullet/bullet.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.component.js",
@@ -1821,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",
@@ -1831,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",
@@ -1894,6 +2013,7 @@
               "parameters": [
                 {
                   "name": "active",
+                  "optional": true,
                   "type": {
                     "text": "boolean"
                   },
@@ -1993,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": {
@@ -2008,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",
@@ -2056,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"
@@ -2082,6 +2215,7 @@
                 },
                 {
                   "name": "softDisabled",
+                  "optional": true,
                   "type": {
                     "text": "boolean"
                   },
@@ -2182,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"
@@ -2190,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"
@@ -2268,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",
@@ -2281,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": {
@@ -2363,77 +2507,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/bullet/bullet.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
-          "name": "Bullet",
-          "cssProperties": [
-            {
-              "description": "background color of the bullet",
-              "name": "--mdc-bullet-background-color"
-            },
-            {
-              "description": "small size value of the bullet",
-              "name": "--mdc-bullet-size-small"
-            },
-            {
-              "description": "medium size value of the bullet",
-              "name": "--mdc-bullet-size-medium"
-            },
-            {
-              "description": "large size value of the bullet",
-              "name": "--mdc-bullet-size-large"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "privacy": "public",
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "attribute": "size",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-bullet",
-          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Bullet",
-            "module": "components/bullet/bullet.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/buttonsimple/buttonsimple.component.js",
@@ -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"
             },
             {
@@ -2485,7 +2558,15 @@
             },
             {
               "kind": "field",
-              "name": "type",
+              "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",
               "type": {
                 "text": "ButtonType"
               },
@@ -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,70 +9043,28 @@
     },
     {
       "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 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": "Allows customization of the default background color in solid variant.",
+              "name": "--mdc-marker-solid-background-color"
             },
             {
-              "description": "slot for list item side header text.",
-              "name": "trailing-text-side-header"
+              "description": "Allows customization of the default stripes in striped variant.",
+              "name": "--mdc-marker-striped-color"
             },
             {
-              "description": "slot for list item subline text.",
-              "name": "trailing-text-subline"
+              "description": "Allows customization of the default background color in striped variant.",
+              "name": "--mdc-marker-striped-background-color"
             },
             {
-              "description": "slot for list item controls to appear of trailing end.",
-              "name": "trailing-controls"
+              "description": "Allows customization of the default width.",
+              "name": "--mdc-marker-width"
             }
           ],
           "members": [
@@ -8977,236 +9072,127 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "ListItemVariants"
+                "text": "MarkerVariants"
               },
-              "description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
-              "default": "'full-width'",
+              "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 primary label of the list item.\nThis appears on the leading side of the list item.",
+              "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": "secondaryLabel",
+              "name": "dataAriaLabel",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
-              "attribute": "secondary-label",
-              "reflects": true
+              "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": "tertiaryLabel",
+              "name": "disabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
-              "attribute": "tertiary-label",
-              "reflects": true
-            },
+              "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": [
             {
-              "kind": "field",
-              "name": "sideHeaderText",
+              "name": "label",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
-              "attribute": "side-header-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "sublineText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
-              "attribute": "subline-text",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "getText",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "slotName",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The name of the slot to be used."
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "TextType"
-                  },
-                  "description": "The type of the text element."
-                },
-                {
-                  "name": "content",
-                  "optional": true,
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The text content to be displayed within the slot."
-                }
-              ],
-              "description": "Generates a template for a text slot with the specified content."
-            },
-            {
-              "kind": "method",
-              "name": "disableSlottedChildren",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "disabled",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "Whether to disable or enable the controls."
-                }
-              ],
-              "description": "Disable or enable all slotted elements in the leading and trailing slots.\nThis is useful when the list item is disabled, to prevent the user from interacting with the controls."
-            },
-            {
-              "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"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "utils/mixins/TabIndexMixin.js"
-              }
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onClick) This event is dispatched when the listitem is clicked.",
-              "name": "click",
-              "reactName": "onClick"
-            },
-            {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.",
-              "name": "keydown",
-              "reactName": "onKeyDown"
-            },
-            {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the listitem.",
-              "name": "keyup",
-              "reactName": "onKeyUp"
-            },
-            {
-              "description": "(React: onFocus) This event is dispatched when the listitem receives focus.",
-              "name": "focus",
-              "reactName": "onFocus"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "ListItemVariants"
-              },
-              "description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
-              "default": "'full-width'",
-              "fieldName": "variant"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The primary label of the list item.\nThis appears on the leading side of the list item.",
+              "description": "The header text to be displayed on the top of the options list.",
               "fieldName": "label"
             },
-            {
-              "name": "secondary-label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
-              "fieldName": "secondaryLabel"
-            },
-            {
-              "name": "tertiary-label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
-              "fieldName": "tertiaryLabel"
-            },
-            {
-              "name": "side-header-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
-              "fieldName": "sideHeaderText"
-            },
-            {
-              "name": "subline-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
-              "fieldName": "sublineText"
-            },
             {
               "name": "data-aria-label",
               "type": {
@@ -9232,19 +9218,6 @@
                 "name": "DisabledMixin",
                 "module": "src/utils/mixins/DisabledMixin.ts"
               }
-            },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
-              "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "src/utils/mixins/TabIndexMixin.ts"
-              }
             }
           ],
           "mixins": [
@@ -9255,18 +9228,14 @@
             {
               "name": "DisabledMixin",
               "module": "/src/utils/mixins/DisabledMixin"
-            },
-            {
-              "name": "TabIndexMixin",
-              "module": "/src/utils/mixins/TabIndexMixin"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-listitem",
-          "jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\n *\n * The leading and trailing slots can be used to display controls and text. <br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n *  - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n *  - Allows customization of the secondary and tertiary label text slot color.\n * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.\n * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.\n *\n * @event click - (React: onClick) This event is dispatched when the listitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.\n * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.\n */",
+          "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
         }
       ],
@@ -9275,36 +9244,78 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ListItem",
-            "module": "components/listitem/listitem.component.js"
+            "name": "OptGroup",
+            "module": "components/optgroup/optgroup.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/marker/marker.component.js",
+      "path": "components/listitem/listitem.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",
+          "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 in solid variant.",
-              "name": "--mdc-marker-solid-background-color"
+              "description": "Allows customization of the default background color.",
+              "name": "--mdc-listitem-default-background-color"
             },
             {
-              "description": "Allows customization of the default stripes in striped variant.",
-              "name": "--mdc-marker-striped-color"
+              "description": "Allows customization of the background color on hover.",
+              "name": "--mdc-listitem-background-color-hover"
             },
             {
-              "description": "Allows customization of the default background color in striped variant.",
-              "name": "--mdc-marker-striped-background-color"
+              "description": "Allows customization of the background color when pressed.",
+              "name": "--mdc-listitem-background-color-active"
             },
             {
-              "description": "Allows customization of the default width.",
-              "name": "--mdc-marker-width"
+              "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"
+            },
+            {
+              "description": "slot for list item subline text.",
+              "name": "trailing-text-subline"
+            },
+            {
+              "description": "slot for list item controls to appear of trailing end.",
+              "name": "trailing-controls"
             }
           ],
           "members": [
@@ -9312,86 +9323,117 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "MarkerVariants"
+                "text": "ListItemVariants"
               },
-              "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",
+              "description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
+              "default": "'full-width'",
               "attribute": "variant",
               "reflects": true
-            }
-          ],
-          "attributes": [
+            },
             {
-              "name": "variant",
+              "kind": "field",
+              "name": "label",
               "type": {
-                "text": "MarkerVariants"
+                "text": "string | undefined"
               },
-              "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": "The primary label of the list item.\nThis appears on the leading side of the list item.",
+              "attribute": "label",
+              "reflects": true
+            },
             {
-              "description": "Allows customization of the disabled option color.",
-              "name": "--mdc-optgroup-disabled-color"
-            }
-          ],
-          "slots": [
+              "kind": "field",
+              "name": "secondaryLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
+              "attribute": "secondary-label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tertiaryLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
+              "attribute": "tertiary-label",
+              "reflects": true
+            },
             {
-              "description": "This is a default slot for mdc-option elements.",
-              "name": "default"
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "sideHeaderText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
+              "attribute": "side-header-text",
+              "reflects": true
+            },
             {
               "kind": "field",
-              "name": "label",
+              "name": "sublineText",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The header text to be displayed on the top of the options list.",
-              "attribute": "label",
+              "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
+              "attribute": "subline-text",
               "reflects": true
             },
             {
               "kind": "method",
-              "name": "setDisabledForAllOptions",
+              "name": "getText",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "slotName",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The name of the slot to be used."
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "TextType"
+                  },
+                  "description": "The type of the text element."
+                },
+                {
+                  "name": "content",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The text content to be displayed within the slot."
+                }
+              ],
+              "description": "Generates a template for a text slot with the specified content."
+            },
+            {
+              "kind": "method",
+              "name": "disableSlottedChildren",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "Whether to disable or enable the controls."
+                }
+              ],
+              "description": "Disable or enable all slotted elements in the leading and trailing slots.\nThis is useful when the list item is disabled, to prevent the user from interacting with the controls."
             },
             {
               "kind": "field",
@@ -9422,17 +9464,95 @@
                 "name": "DisabledMixin",
                 "module": "utils/mixins/DisabledMixin.js"
               }
+            },
+            {
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onClick) This event is dispatched when the listitem is clicked.",
+              "name": "click",
+              "reactName": "onClick"
+            },
+            {
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.",
+              "name": "keydown",
+              "reactName": "onKeyDown"
+            },
+            {
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the listitem.",
+              "name": "keyup",
+              "reactName": "onKeyUp"
+            },
+            {
+              "description": "(React: onFocus) This event is dispatched when the listitem receives focus.",
+              "name": "focus",
+              "reactName": "onFocus"
             }
           ],
           "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "ListItemVariants"
+              },
+              "description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
+              "default": "'full-width'",
+              "fieldName": "variant"
+            },
             {
               "name": "label",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The header text to be displayed on the top of the options list.",
+              "description": "The primary label of the list item.\nThis appears on the leading side of the list item.",
               "fieldName": "label"
             },
+            {
+              "name": "secondary-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
+              "fieldName": "secondaryLabel"
+            },
+            {
+              "name": "tertiary-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
+              "fieldName": "tertiaryLabel"
+            },
+            {
+              "name": "side-header-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
+              "fieldName": "sideHeaderText"
+            },
+            {
+              "name": "subline-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
+              "fieldName": "sublineText"
+            },
             {
               "name": "data-aria-label",
               "type": {
@@ -9458,6 +9578,19 @@
                 "name": "DisabledMixin",
                 "module": "src/utils/mixins/DisabledMixin.ts"
               }
+            },
+            {
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
+              }
             }
           ],
           "mixins": [
@@ -9468,14 +9601,18 @@
             {
               "name": "DisabledMixin",
               "module": "/src/utils/mixins/DisabledMixin"
+            },
+            {
+              "name": "TabIndexMixin",
+              "module": "/src/utils/mixins/TabIndexMixin"
             }
           ],
           "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 */",
+          "tagName": "mdc-listitem",
+          "jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\n *\n * The leading and trailing slots can be used to display controls and text. <br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n *  - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n *  - Allows customization of the secondary and tertiary label text slot color.\n * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.\n * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.\n *\n * @event click - (React: onClick) This event is dispatched when the listitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.\n * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.\n */",
           "customElement": true
         }
       ],
@@ -9484,8 +9621,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "OptGroup",
-            "module": "components/optgroup/optgroup.component.js"
+            "name": "ListItem",
+            "module": "components/listitem/listitem.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": {