@momentum-design/components 0.129.21 → 0.129.23

package/dist/custom-elements.json

@@ -1095,7 +1095,7 @@
                 "text": "string | undefined"
               },
               "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' (when)",
+              "default": "'aria-pressed'",
               "attribute": "ariaStateKey",
               "reflects": true,
               "inheritedFrom": {
@@ -1581,7 +1581,7 @@
                 "text": "string | undefined"
               },
               "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' (when)",
+              "default": "'aria-pressed'",
               "fieldName": "ariaStateKey",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -3708,7 +3708,7 @@
                 "text": "string | undefined"
               },
               "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' (when)",
+              "default": "'aria-pressed'",
               "attribute": "ariaStateKey",
               "reflects": true,
               "inheritedFrom": {
@@ -4306,7 +4306,7 @@
                 "text": "string | undefined"
               },
               "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' (when)",
+              "default": "'aria-pressed'",
               "fieldName": "ariaStateKey",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -5256,7 +5256,7 @@
                 "text": "string | undefined"
               },
               "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' (when)",
+              "default": "'aria-pressed'",
               "attribute": "ariaStateKey",
               "reflects": true,
               "inheritedFrom": {
@@ -5857,7 +5857,7 @@
                 "text": "string | undefined"
               },
               "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' (when)",
+              "default": "'aria-pressed'",
               "fieldName": "ariaStateKey",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -6971,7 +6971,7 @@
                 "text": "string | undefined"
               },
               "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' (when)",
+              "default": "'aria-pressed'",
               "attribute": "ariaStateKey",
               "reflects": true
             },
@@ -7264,7 +7264,7 @@
                 "text": "string | undefined"
               },
               "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' (when)",
+              "default": "'aria-pressed'",
               "fieldName": "ariaStateKey"
             },
             {
@@ -7372,7 +7372,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The card component allows users to organize information in a structured and tangible\nformat that is visually appealing. `mdc-card` is a static component that supports\nthe following features:\n- Image\n- Header\n   - Icon\n   - Title\n   - Subtitle\n- Body\n\nThe card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n\nThere are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n\nTo make this card interactive, use the following slots:\n- `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n- `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n- `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n- `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\nwithin the footer section.\n\nInteractive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.",
+          "description": "The card component allows users to organize information in a structured and tangible\nformat that is visually appealing. `mdc-card` is a static component.\n\n## Card Structure\n- **Image**: Optional visual content at the top\n- **Header**: Contains icon, title, subtitle, and action buttons\n- **Body**: Main text content area\n- **Footer**: Optional footer with links and buttons\n\n## Features\n- Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).\n- Can be made interactive by adding elements to slots like `icon-button`, `footer-link`, and footer buttons.",
           "name": "Card",
           "cssProperties": [
             {
@@ -7439,6 +7439,10 @@
               "description": "This slot is for passing the content after the body",
               "name": "after-body"
             },
+            {
+              "description": "This slot supports action icon buttons in the header section (maximum of 3 buttons)",
+              "name": "icon-button"
+            },
             {
               "description": "This slot is for passing `mdc-link` component within the footer section.",
               "name": "footer-link"
@@ -7522,7 +7526,7 @@
               "type": {
                 "text": "CardOrientation"
               },
-              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
+              "description": "The orientation of the card.\n- `vertical`: Card in vertical layout with min-width of 20rem (default)\n- `horizontal`: Card in horizontal layout with min-width of 40rem",
               "default": "'vertical'",
               "attribute": "orientation",
               "reflects": true,
@@ -7653,7 +7657,7 @@
               "type": {
                 "text": "CardVariant"
               },
-              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
+              "description": "The variant of the card that represents the border styling.\n- `border`: Card with border (default)\n- `ghost`: Card without border\n- `promotional`: Card with promotional styling",
               "default": "'border'",
               "attribute": "variant",
               "reflects": true,
@@ -7678,7 +7682,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-card",
-          "jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component that supports\n * the following features:\n * - Image\n * - Header\n *    - Icon\n *    - Title\n *    - Subtitle\n * - Body\n *\n * The card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n *\n * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n *\n * To make this card interactive, use the following slots:\n * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n * - `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.\n *\n * @slot image - This slot is for overriding the image content of the card\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n */",
+          "jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component.\n * \n * ## Card Structure\n * - **Image**: Optional visual content at the top\n * - **Header**: Contains icon, title, subtitle, and action buttons\n * - **Body**: Main text content area\n * - **Footer**: Optional footer with links and buttons\n *\n * ## Features\n * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).\n * - Can be made interactive by adding elements to slots like `icon-button`, `footer-link`, and footer buttons.\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot image - This slot is for overriding the image content of the card\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot icon-button - This slot supports action icon buttons in the header section (maximum of 3 buttons)\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
           "customElement": true,
           "attributes": [
             {
@@ -7738,7 +7742,7 @@
               "type": {
                 "text": "CardVariant"
               },
-              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
+              "description": "The variant of the card that represents the border styling.\n- `border`: Card with border (default)\n- `ghost`: Card without border\n- `promotional`: Card with promotional styling",
               "default": "'border'",
               "fieldName": "variant",
               "inheritedFrom": {
@@ -7751,7 +7755,7 @@
               "type": {
                 "text": "CardOrientation"
               },
-              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
+              "description": "The orientation of the card.\n- `vertical`: Card in vertical layout with min-width of 20rem (default)\n- `horizontal`: Card in horizontal layout with min-width of 40rem",
               "default": "'vertical'",
               "fieldName": "orientation",
               "inheritedFrom": {
@@ -7817,7 +7821,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "cardbutton component looks like a card and behaves as a button component.\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\nMake sure to pass only non-interactable elements within the slots.",
+          "description": "cardbutton component looks like a card and behaves as a button component.\n\n## Features\n- Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).\n- Interacting anywhere on the card triggers the click event.\n- Use `name` and `value` attributes when using within forms.\n\n**Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.",
           "name": "CardButton",
           "cssProperties": [
             {
@@ -7956,7 +7960,7 @@
                 "text": "string | undefined"
               },
               "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' (when)",
+              "default": "'aria-pressed'",
               "attribute": "ariaStateKey",
               "reflects": true,
               "inheritedFrom": {
@@ -8130,7 +8134,7 @@
               "type": {
                 "text": "CardOrientation"
               },
-              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
+              "description": "The orientation of the card.\n- `vertical`: Card in vertical layout with min-width of 20rem (default)\n- `horizontal`: Card in horizontal layout with min-width of 40rem",
               "default": "'vertical'",
               "attribute": "orientation",
               "reflects": true,
@@ -8424,7 +8428,7 @@
               "type": {
                 "text": "CardVariant"
               },
-              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
+              "description": "The variant of the card that represents the border styling.\n- `border`: Card with border (default)\n- `ghost`: Card without border\n- `promotional`: Card with promotional styling",
               "default": "'border'",
               "attribute": "variant",
               "reflects": true,
@@ -8483,7 +8487,7 @@
             "module": "/src/components/buttonsimple/buttonsimple.component"
           },
           "tagName": "mdc-cardbutton",
-          "jsDoc": "/**\n * cardbutton component looks like a card and behaves as a button component.\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * @tagname mdc-cardbutton\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It fires the click event when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It fires the click event when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n * @slot image - This slot is for overriding the image content of the card\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
+          "jsDoc": "/**\n * cardbutton component looks like a card and behaves as a button component.\n *\n * ## Features\n * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).\n * - Interacting anywhere on the card triggers the click event.\n * - Use `name` and `value` attributes when using within forms.\n *\n * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.\n *\n * @tagname mdc-cardbutton\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot image - This slot is for overriding the image content of the card\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It fires the click event when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It fires the click event when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
           "customElement": true,
           "attributes": [
             {
@@ -8543,7 +8547,7 @@
               "type": {
                 "text": "CardVariant"
               },
-              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
+              "description": "The variant of the card that represents the border styling.\n- `border`: Card with border (default)\n- `ghost`: Card without border\n- `promotional`: Card with promotional styling",
               "default": "'border'",
               "fieldName": "variant",
               "inheritedFrom": {
@@ -8556,7 +8560,7 @@
               "type": {
                 "text": "CardOrientation"
               },
-              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
+              "description": "The orientation of the card.\n- `vertical`: Card in vertical layout with min-width of 20rem (default)\n- `horizontal`: Card in horizontal layout with min-width of 40rem",
               "default": "'vertical'",
               "fieldName": "orientation",
               "inheritedFrom": {
@@ -8699,7 +8703,7 @@
                 "text": "string | undefined"
               },
               "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' (when)",
+              "default": "'aria-pressed'",
               "fieldName": "ariaStateKey",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -8763,7 +8767,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n\nWhile using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\nThis card would have events for selected and unselected (similar to checkbox)\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\nMake sure to pass only non-interactable elements within the slots.\n\nMake sure to pass the `card-title` mandatorily for this card.",
+          "description": "cardcheckbox component extends `mdc-card` and supports checkbox selection interaction.\nMultiple cards can be checked simultaneously.\n\n## Features\n- Supports two orientations (vertical and horizontal), three visual variants (border, ghost, and promotional), and two selection types (check icon or checkbox component).\n- Interacting anywhere on the card toggles the checked state and dispatches a `change` event.\n- Card has `role=\"checkbox\"` and manages `aria-checked` and `aria-disabled` attributes automatically.\n\n## Usage\n- The `card-title` attribute is required.\n- When using within a form or group, wrap cards in a container with `role=\"group\"` and provide an `aria-label`.\n\n**Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.",
           "name": "CardCheckbox",
           "cssProperties": [
             {
@@ -8918,6 +8922,14 @@
                 "module": "src/components/card/card.component.ts"
               }
             },
+            {
+              "description": "This slot supports action icon buttons in the header section (maximum of 3 buttons)",
+              "name": "icon-button",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
             {
               "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
               "name": "footer-button-secondary",
@@ -9027,7 +9039,7 @@
               "type": {
                 "text": "CardOrientation"
               },
-              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
+              "description": "The orientation of the card.\n- `vertical`: Card in vertical layout with min-width of 20rem (default)\n- `horizontal`: Card in horizontal layout with min-width of 40rem",
               "default": "'vertical'",
               "attribute": "orientation",
               "reflects": true,
@@ -9128,7 +9140,7 @@
               "type": {
                 "text": "SelectionType"
               },
-              "description": "The selection type of the card. It can either be set to 'check' or 'checkbox'",
+              "description": "The selection type of the card that determines the visual indicator.\n- `check`: Shows a check icon when selected\n- `checkbox`: Shows a checkbox component when selected or unselected",
               "default": "'check'",
               "attribute": "selection-type",
               "reflects": true
@@ -9235,7 +9247,7 @@
               "type": {
                 "text": "CardVariant"
               },
-              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
+              "description": "The variant of the card that represents the border styling.\n- `border`: Card with border (default)\n- `ghost`: Card without border\n- `promotional`: Card with promotional styling",
               "default": "'border'",
               "attribute": "variant",
               "reflects": true,
@@ -9290,7 +9302,7 @@
               "type": {
                 "text": "SelectionType"
               },
-              "description": "The selection type of the card. It can either be set to 'check' or 'checkbox'",
+              "description": "The selection type of the card that determines the visual indicator.\n- `check`: Shows a check icon when selected\n- `checkbox`: Shows a checkbox component when selected or unselected",
               "default": "'check'",
               "fieldName": "selectionType"
             },
@@ -9377,7 +9389,7 @@
               "type": {
                 "text": "CardVariant"
               },
-              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
+              "description": "The variant of the card that represents the border styling.\n- `border`: Card with border (default)\n- `ghost`: Card without border\n- `promotional`: Card with promotional styling",
               "default": "'border'",
               "fieldName": "variant",
               "inheritedFrom": {
@@ -9390,7 +9402,7 @@
               "type": {
                 "text": "CardOrientation"
               },
-              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
+              "description": "The orientation of the card.\n- `vertical`: Card in vertical layout with min-width of 20rem (default)\n- `horizontal`: Card in horizontal layout with min-width of 40rem",
               "default": "'vertical'",
               "fieldName": "orientation",
               "inheritedFrom": {
@@ -9452,7 +9464,7 @@
             "module": "/src/components/card/card.component"
           },
           "tagName": "mdc-cardcheckbox",
-          "jsDoc": "/**\n * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\n * This card would have events for selected and unselected (similar to checkbox)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardcheckbox\n *\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\n */",
+          "jsDoc": "/**\n * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction.\n * Multiple cards can be checked simultaneously.\n *\n * ## Features\n * - Supports two orientations (vertical and horizontal), three visual variants (border, ghost, and promotional), and two selection types (check icon or checkbox component).\n * - Interacting anywhere on the card toggles the checked state and dispatches a `change` event.\n * - Card has `role=\"checkbox\"` and manages `aria-checked` and `aria-disabled` attributes automatically.\n *\n * ## Usage\n * - The `card-title` attribute is required.\n * - When using within a form or group, wrap cards in a container with `role=\"group\"` and provide an `aria-label`.\n *\n * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.\n *\n * @tagname mdc-cardcheckbox\n *\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
           "customElement": true
         }
       ],
@@ -9473,7 +9485,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n\nWhile using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\nThis card would have events for selected and unselected (similar to radio)\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\nMake sure to pass only non-interactable elements within the slots.\n\nMake sure to pass the `card-title` mandatorily for this card.",
+          "description": "cardradio component extends `mdc-card` and supports radio selection interaction.\nOnly one card can be selected at a time within the same group (defined by `name` attribute).\n\n## Features\n- Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).\n- Selecting a card automatically unselects other cards in the same group and dispatches a `change` event.\n- Supports keyboard navigation with arrow keys to move between cards in the same group.\n- Card has `role=\"radio\"` and manages `aria-checked` and `aria-disabled` attributes automatically.\n\n## Usage\n- Both `card-title` and `name` attributes are required.\n- When using within a form or group, wrap cards in a container with `role=\"radiogroup\"` and provide an `aria-label`.\n\n**Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.",
           "name": "CardRadio",
           "cssProperties": [
             {
@@ -9628,6 +9640,14 @@
                 "module": "src/components/card/card.component.ts"
               }
             },
+            {
+              "description": "This slot supports action icon buttons in the header section (maximum of 3 buttons)",
+              "name": "icon-button",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
             {
               "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
               "name": "footer-button-secondary",
@@ -9749,7 +9769,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The name of the radio.",
+              "description": "The name of the radio group. Cards with the same name are grouped together,\nensuring only one card in the group can be selected at a time.",
               "attribute": "name"
             },
             {
@@ -9758,7 +9778,7 @@
               "type": {
                 "text": "CardOrientation"
               },
-              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
+              "description": "The orientation of the card.\n- `vertical`: Card in vertical layout with min-width of 20rem (default)\n- `horizontal`: Card in horizontal layout with min-width of 40rem",
               "default": "'vertical'",
               "attribute": "orientation",
               "reflects": true,
@@ -9990,7 +10010,7 @@
               "type": {
                 "text": "CardVariant"
               },
-              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
+              "description": "The variant of the card that represents the border styling.\n- `border`: Card with border (default)\n- `ghost`: Card without border\n- `promotional`: Card with promotional styling",
               "default": "'border'",
               "attribute": "variant",
               "reflects": true,
@@ -10010,17 +10030,17 @@
               "reactName": "onChange"
             },
             {
-              "description": "(React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.",
+              "description": "(React: onClick) Event that gets dispatched when the card is clicked. It selects the card and unselects others in the same group.",
               "name": "click",
               "reactName": "onClick"
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the card. It toggles the checked state when enter key is used.",
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the card. It selects the card when enter key or arrow keys are used.",
               "name": "keydown",
               "reactName": "onKeyDown"
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the card. It toggles the checked state when space key is used.",
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the card. It selects the card when space key is used.",
               "name": "keyup",
               "reactName": "onKeyUp"
             },
@@ -10046,7 +10066,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The name of the radio.",
+              "description": "The name of the radio group. Cards with the same name are grouped together,\nensuring only one card in the group can be selected at a time.",
               "fieldName": "name"
             },
             {
@@ -10132,7 +10152,7 @@
               "type": {
                 "text": "CardVariant"
               },
-              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
+              "description": "The variant of the card that represents the border styling.\n- `border`: Card with border (default)\n- `ghost`: Card without border\n- `promotional`: Card with promotional styling",
               "default": "'border'",
               "fieldName": "variant",
               "inheritedFrom": {
@@ -10145,7 +10165,7 @@
               "type": {
                 "text": "CardOrientation"
               },
-              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
+              "description": "The orientation of the card.\n- `vertical`: Card in vertical layout with min-width of 20rem (default)\n- `horizontal`: Card in horizontal layout with min-width of 40rem",
               "default": "'vertical'",
               "fieldName": "orientation",
               "inheritedFrom": {
@@ -10207,7 +10227,7 @@
             "module": "/src/components/card/card.component"
           },
           "tagName": "mdc-cardradio",
-          "jsDoc": "/**\n * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\n * This card would have events for selected and unselected (similar to radio)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardradio\n *\n * @dependency mdc-icon\n * @dependency mdc-staticradio\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\n */",
+          "jsDoc": "/**\n * cardradio component extends `mdc-card` and supports radio selection interaction.\n * Only one card can be selected at a time within the same group (defined by `name` attribute).\n *\n * ## Features\n * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).\n * - Selecting a card automatically unselects other cards in the same group and dispatches a `change` event.\n * - Supports keyboard navigation with arrow keys to move between cards in the same group.\n * - Card has `role=\"radio\"` and manages `aria-checked` and `aria-disabled` attributes automatically.\n *\n * ## Usage\n * - Both `card-title` and `name` attributes are required.\n * - When using within a form or group, wrap cards in a container with `role=\"radiogroup\"` and provide an `aria-label`.\n *\n * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.\n *\n * @tagname mdc-cardradio\n *\n * @dependency mdc-icon\n * @dependency mdc-staticradio\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It selects the card and unselects others in the same group.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It selects the card when enter key or arrow keys are used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It selects the card when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
           "customElement": true
         }
       ],
@@ -10815,7 +10835,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "attribute": "toggletip-placement",
               "reflects": true,
@@ -10830,7 +10850,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "attribute": "toggletip-strategy",
               "reflects": true,
@@ -10845,7 +10865,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "attribute": "toggletip-text",
               "reflects": true,
               "inheritedFrom": {
@@ -11081,7 +11101,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "fieldName": "toggletipText",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -11093,7 +11113,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "fieldName": "toggletipPlacement",
               "inheritedFrom": {
@@ -11106,7 +11126,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "fieldName": "toggletipStrategy",
               "inheritedFrom": {
@@ -11270,7 +11290,7 @@
                 "text": "string | undefined"
               },
               "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' (when)",
+              "default": "'aria-pressed'",
               "attribute": "ariaStateKey",
               "reflects": true,
               "inheritedFrom": {
@@ -11769,7 +11789,7 @@
                 "text": "string | undefined"
               },
               "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' (when)",
+              "default": "'aria-pressed'",
               "fieldName": "ariaStateKey",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -14727,7 +14747,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "attribute": "toggletip-placement",
               "reflects": true,
@@ -14742,7 +14762,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "attribute": "toggletip-strategy",
               "reflects": true,
@@ -14757,7 +14777,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "attribute": "toggletip-text",
               "reflects": true,
               "inheritedFrom": {
@@ -15132,7 +15152,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "fieldName": "toggletipText",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -15144,7 +15164,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "fieldName": "toggletipPlacement",
               "inheritedFrom": {
@@ -15157,7 +15177,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "fieldName": "toggletipStrategy",
               "inheritedFrom": {
@@ -16768,7 +16788,7 @@
                 "text": "string | undefined"
               },
               "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' (when)",
+              "default": "'aria-pressed'",
               "attribute": "ariaStateKey",
               "reflects": true,
               "inheritedFrom": {
@@ -17327,7 +17347,7 @@
                 "text": "string | undefined"
               },
               "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' (when)",
+              "default": "'aria-pressed'",
               "fieldName": "ariaStateKey",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -17810,7 +17830,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "attribute": "toggletip-placement",
               "reflects": true,
@@ -17825,7 +17845,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "attribute": "toggletip-strategy",
               "reflects": true,
@@ -17840,7 +17860,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "attribute": "toggletip-text",
               "reflects": true,
               "inheritedFrom": {
@@ -17944,7 +17964,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "fieldName": "toggletipText",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -17956,7 +17976,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "fieldName": "toggletipPlacement",
               "inheritedFrom": {
@@ -17969,7 +17989,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "fieldName": "toggletipStrategy",
               "inheritedFrom": {
@@ -18278,7 +18298,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "attribute": "toggletip-placement",
               "reflects": true
@@ -18289,7 +18309,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "attribute": "toggletip-strategy",
               "reflects": true
@@ -18300,7 +18320,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "attribute": "toggletip-text",
               "reflects": true
             }
@@ -18345,7 +18365,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "fieldName": "toggletipText"
             },
             {
@@ -18353,7 +18373,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "fieldName": "toggletipPlacement"
             },
@@ -18362,7 +18382,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "fieldName": "toggletipStrategy"
             },
@@ -19941,7 +19961,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "attribute": "toggletip-placement",
               "reflects": true,
@@ -19956,7 +19976,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "attribute": "toggletip-strategy",
               "reflects": true,
@@ -19971,7 +19991,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "attribute": "toggletip-text",
               "reflects": true,
               "inheritedFrom": {
@@ -20338,7 +20358,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "fieldName": "toggletipText",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -20350,7 +20370,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "fieldName": "toggletipPlacement",
               "inheritedFrom": {
@@ -20363,7 +20383,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "fieldName": "toggletipStrategy",
               "inheritedFrom": {
@@ -21362,7 +21382,7 @@
                 "text": "string | undefined"
               },
               "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' (when)",
+              "default": "'aria-pressed'",
               "attribute": "ariaStateKey",
               "reflects": true,
               "inheritedFrom": {
@@ -21856,7 +21876,7 @@
                 "text": "string | undefined"
               },
               "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' (when)",
+              "default": "'aria-pressed'",
               "fieldName": "ariaStateKey",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -32979,7 +32999,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "attribute": "toggletip-placement",
               "reflects": true,
@@ -32994,7 +33014,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "attribute": "toggletip-strategy",
               "reflects": true,
@@ -33009,7 +33029,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "attribute": "toggletip-text",
               "reflects": true,
               "inheritedFrom": {
@@ -33482,7 +33502,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "fieldName": "toggletipText",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -33494,7 +33514,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "fieldName": "toggletipPlacement",
               "inheritedFrom": {
@@ -33507,7 +33527,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "fieldName": "toggletipStrategy",
               "inheritedFrom": {
@@ -35833,7 +35853,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "attribute": "toggletip-placement",
               "reflects": true,
@@ -35848,7 +35868,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "attribute": "toggletip-strategy",
               "reflects": true,
@@ -35863,7 +35883,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "attribute": "toggletip-text",
               "reflects": true,
               "inheritedFrom": {
@@ -36003,7 +36023,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "fieldName": "toggletipText",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -36015,7 +36035,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "fieldName": "toggletipPlacement",
               "inheritedFrom": {
@@ -36028,7 +36048,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "fieldName": "toggletipStrategy",
               "inheritedFrom": {
@@ -36595,7 +36615,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "attribute": "toggletip-placement",
               "reflects": true,
@@ -36610,7 +36630,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "attribute": "toggletip-strategy",
               "reflects": true,
@@ -36625,7 +36645,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "attribute": "toggletip-text",
               "reflects": true,
               "inheritedFrom": {
@@ -36792,7 +36812,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "fieldName": "toggletipText",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -36804,7 +36824,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "fieldName": "toggletipPlacement",
               "inheritedFrom": {
@@ -36817,7 +36837,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "fieldName": "toggletipStrategy",
               "inheritedFrom": {
@@ -37451,7 +37471,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "attribute": "toggletip-placement",
               "reflects": true,
@@ -37466,7 +37486,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "attribute": "toggletip-strategy",
               "reflects": true,
@@ -37481,7 +37501,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "attribute": "toggletip-text",
               "reflects": true,
               "inheritedFrom": {
@@ -37730,7 +37750,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "fieldName": "toggletipText",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -37742,7 +37762,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "fieldName": "toggletipPlacement",
               "inheritedFrom": {
@@ -37755,7 +37775,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "fieldName": "toggletipStrategy",
               "inheritedFrom": {
@@ -38180,7 +38200,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "attribute": "toggletip-placement",
               "reflects": true,
@@ -38195,7 +38215,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "attribute": "toggletip-strategy",
               "reflects": true,
@@ -38210,7 +38230,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "attribute": "toggletip-text",
               "reflects": true,
               "inheritedFrom": {
@@ -38310,7 +38330,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "fieldName": "toggletipText",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -38322,7 +38342,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "fieldName": "toggletipPlacement",
               "inheritedFrom": {
@@ -38335,7 +38355,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "fieldName": "toggletipStrategy",
               "inheritedFrom": {
@@ -39713,7 +39733,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "attribute": "toggletip-placement",
               "reflects": true,
@@ -39728,7 +39748,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "attribute": "toggletip-strategy",
               "reflects": true,
@@ -39743,7 +39763,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "attribute": "toggletip-text",
               "reflects": true,
               "inheritedFrom": {
@@ -40205,7 +40225,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "fieldName": "toggletipText",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -40217,7 +40237,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "fieldName": "toggletipPlacement",
               "inheritedFrom": {
@@ -40230,7 +40250,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "fieldName": "toggletipStrategy",
               "inheritedFrom": {
@@ -41247,7 +41267,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "attribute": "toggletip-placement",
               "reflects": true,
@@ -41262,7 +41282,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "attribute": "toggletip-strategy",
               "reflects": true,
@@ -41277,7 +41297,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "attribute": "toggletip-text",
               "reflects": true,
               "inheritedFrom": {
@@ -41777,7 +41797,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "fieldName": "toggletipText",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -41789,7 +41809,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "fieldName": "toggletipPlacement",
               "inheritedFrom": {
@@ -41802,7 +41822,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "fieldName": "toggletipStrategy",
               "inheritedFrom": {
@@ -42831,7 +42851,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "attribute": "toggletip-placement",
               "reflects": true,
@@ -42846,7 +42866,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "attribute": "toggletip-strategy",
               "reflects": true,
@@ -42861,7 +42881,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "attribute": "toggletip-text",
               "reflects": true,
               "inheritedFrom": {
@@ -43167,7 +43187,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "fieldName": "toggletipText",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -43179,7 +43199,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "fieldName": "toggletipPlacement",
               "inheritedFrom": {
@@ -43192,7 +43212,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "fieldName": "toggletipStrategy",
               "inheritedFrom": {
@@ -45118,55 +45138,51 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "This is a decorative component that is styled to look as a toggle. <br/>\nIt has 5 properties - checked, size, disabled, readonly and soft-disabled. <br/>\nWe are using the same styling that has been created for the `mdc-toggle` component.",
+          "description": "The StaticToggle is a decorative component that visually represents a toggle switch without interactive functionality.\nIt is primarily used for display purposes or as a building block within custom interactive components.\nThis component shares the same visual styling as the interactive `mdc-toggle` component.",
           "name": "StaticToggle",
           "cssProperties": [
             {
-              "description": "The width of the toggle",
-              "name": "--mdc-toggle-width"
+              "description": "The width of the static toggle.",
+              "name": "--mdc-statictoggle-width"
             },
             {
-              "description": "The height of the toggle",
-              "name": "--mdc-toggle-height"
+              "description": "The height of the static toggle.",
+              "name": "--mdc-statictoggle-height"
             },
             {
-              "description": "The border radius of the toggle",
-              "name": "--mdc-toggle-border-radius"
+              "description": "The border radius of the static toggle.",
+              "name": "--mdc-statictoggle-border-radius"
             },
             {
-              "description": "The border color of the toggle",
-              "name": "--mdc-toggle-border-color"
+              "description": "The border color of the static toggle.",
+              "name": "--mdc-statictoggle-border-color"
             },
             {
-              "description": "The background color of the toggle",
-              "name": "--mdc-toggle-background-color"
+              "description": "The background color of the static toggle.",
+              "name": "--mdc-statictoggle-background-color"
             },
             {
-              "description": "The icon color of the toggle",
-              "name": "--mdc-toggle-icon-color"
+              "description": "The icon color of the static toggle.",
+              "name": "--mdc-statictoggle-icon-color"
             },
             {
-              "description": "The icon background color of the toggle",
-              "name": "--mdc-toggle-icon-background-color"
+              "description": "The icon background color of the static toggle.",
+              "name": "--mdc-statictoggle-icon-background-color"
             }
           ],
           "cssParts": [
             {
-              "description": "The slider part of the toggle",
+              "description": "The slider part of the toggle.",
               "name": "slider"
             },
             {
-              "description": "The icon part of the toggle",
+              "description": "The icon part of the toggle.",
               "name": "toggle-icon"
             }
           ],
           "slots": [
             {
-              "description": "This is a default/unnamed slot",
-              "name": "default"
-            },
-            {
-              "description": "Default slot for adding label text.",
+              "description": "Default slot for slotted content (typically used by parent `mdc-toggle` for the checkbox input).",
               "name": ""
             }
           ],
@@ -45178,7 +45194,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
+              "description": "Controls the visual state of the toggle.\nWhen true, the toggle appears in the \"on\" or \"active\" state.\nWhen false, the toggle appears in the \"off\" or \"inactive\" state.",
               "attribute": "checked",
               "reflects": true
             },
@@ -45204,7 +45220,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the toggle is read-only.",
+              "description": "When true, the toggle appears in a read-only visual state.\nThis is a decorative property that changes the visual appearance only.",
               "attribute": "readonly",
               "reflects": true
             },
@@ -45214,7 +45230,7 @@
               "type": {
                 "text": "ToggleSize"
               },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "description": "Specifies the size of the toggle component.\n- **default**: Standard size with 1.5rem height\n- **compact**: Smaller size with 1rem height",
               "default": "default",
               "attribute": "size",
               "reflects": true
@@ -45226,7 +45242,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the toggle is soft-disabled.",
+              "description": "When true, the toggle appears in a soft-disabled visual state.\nSoft-disabled elements maintain visual presence but appear non-interactive.\nThis is a decorative property that changes the visual appearance only.",
               "attribute": "soft-disabled",
               "reflects": true
             }
@@ -45238,7 +45254,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
+              "description": "Controls the visual state of the toggle.\nWhen true, the toggle appears in the \"on\" or \"active\" state.\nWhen false, the toggle appears in the \"off\" or \"inactive\" state.",
               "fieldName": "checked"
             },
             {
@@ -45246,7 +45262,7 @@
               "type": {
                 "text": "ToggleSize"
               },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "description": "Specifies the size of the toggle component.\n- **default**: Standard size with 1.5rem height\n- **compact**: Smaller size with 1rem height",
               "default": "default",
               "fieldName": "size"
             },
@@ -45256,7 +45272,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the toggle is read-only.",
+              "description": "When true, the toggle appears in a read-only visual state.\nThis is a decorative property that changes the visual appearance only.",
               "fieldName": "readonly"
             },
             {
@@ -45265,7 +45281,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the toggle is soft-disabled.",
+              "description": "When true, the toggle appears in a soft-disabled visual state.\nSoft-disabled elements maintain visual presence but appear non-interactive.\nThis is a decorative property that changes the visual appearance only.",
               "fieldName": "softDisabled"
             },
             {
@@ -45293,7 +45309,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-statictoggle",
-          "jsDoc": "/**\n * This is a decorative component that is styled to look as a toggle. <br/>\n * It has 5 properties - checked, size, disabled, readonly and soft-disabled. <br/>\n * We are using the same styling that has been created for the `mdc-toggle` component.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-statictoggle\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --mdc-toggle-width - The width of the toggle\n * @cssproperty --mdc-toggle-height - The height of the toggle\n * @cssproperty --mdc-toggle-border-radius - The border radius of the toggle\n * @cssproperty --mdc-toggle-border-color - The border color of the toggle\n * @cssproperty --mdc-toggle-background-color - The background color of the toggle\n * @cssproperty --mdc-toggle-icon-color - The icon color of the toggle\n * @cssproperty --mdc-toggle-icon-background-color - The icon background color of the toggle\n *\n * @csspart slider - The slider part of the toggle\n * @csspart toggle-icon - The icon part of the toggle\n *\n * @slot - Default slot for adding label text.\n */",
+          "jsDoc": "/**\n * The StaticToggle is a decorative component that visually represents a toggle switch without interactive functionality.\n * It is primarily used for display purposes or as a building block within custom interactive components.\n * This component shares the same visual styling as the interactive `mdc-toggle` component.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-statictoggle\n *\n * @slot - Default slot for slotted content (typically used by parent `mdc-toggle` for the checkbox input).\n *\n * @cssproperty --mdc-statictoggle-width - The width of the static toggle.\n * @cssproperty --mdc-statictoggle-height - The height of the static toggle.\n * @cssproperty --mdc-statictoggle-border-radius - The border radius of the static toggle.\n * @cssproperty --mdc-statictoggle-border-color - The border color of the static toggle.\n * @cssproperty --mdc-statictoggle-background-color - The background color of the static toggle.\n * @cssproperty --mdc-statictoggle-icon-color - The icon color of the static toggle.\n * @cssproperty --mdc-statictoggle-icon-background-color - The icon background color of the static toggle.\n *\n * @csspart slider - The slider part of the toggle.\n * @csspart toggle-icon - The icon part of the toggle.\n */",
           "customElement": true
         }
       ],
@@ -45925,7 +45941,7 @@
                 "text": "string | undefined"
               },
               "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' (when)",
+              "default": "'aria-pressed'",
               "attribute": "ariaStateKey",
               "reflects": true,
               "inheritedFrom": {
@@ -46488,7 +46504,7 @@
                 "text": "string | undefined"
               },
               "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' (when)",
+              "default": "'aria-pressed'",
               "fieldName": "ariaStateKey",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -47506,7 +47522,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "attribute": "toggletip-placement",
               "reflects": true,
@@ -47521,7 +47537,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "attribute": "toggletip-strategy",
               "reflects": true,
@@ -47536,7 +47552,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "attribute": "toggletip-text",
               "reflects": true,
               "inheritedFrom": {
@@ -47895,7 +47911,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "fieldName": "toggletipText",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -47907,7 +47923,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "fieldName": "toggletipPlacement",
               "inheritedFrom": {
@@ -47920,7 +47936,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "fieldName": "toggletipStrategy",
               "inheritedFrom": {
@@ -48507,110 +48523,8 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Toggle Component is an interactive control used to switch between two mutually exclusive options,\nsuch as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\nwhere users need to enable or disable a feature.\nIt contains an optional label and an optional helper text.\n\nTo create a group of toggles, use the FormFieldGroup component.\n\nNote: It internally renders a checkbox styled as a toggle switch.",
+          "description": "The Toggle component is an interactive control used to switch between two mutually exclusive states,\nsuch as On/Off or Active/Inactive. It is commonly used in settings panels, forms, and preference selections\nwhere users need to enable or disable a feature.\n\nTo create a group of toggles, use the `mdc-formfieldgroup` component.\n\n**Note:** This component internally renders a native checkbox input element styled as a toggle switch.\n\n## When to use\nUse toggles for binary choices where the change takes effect immediately, such as enabling/disabling settings or features.\n\n## Accessibility\n- Provide clear labels that describe what the toggle controls\n- Use `data-aria-label` when a visual label is not present\n- Keyboard navigation: Space to toggle, Tab to navigate, Enter to submit form\n\n## Styling\nUse the `static-toggle` part to apply custom styles to the toggle switch visual element.\nThis part exposes the underlying [StaticToggle](?path=/docs/components-decorator-statictoggle--docs) component for advanced styling.",
           "name": "Toggle",
-          "cssProperties": [
-            {
-              "description": "The width of the toggle",
-              "name": "--mdc-toggle-width"
-            },
-            {
-              "description": "The height of the toggle",
-              "name": "--mdc-toggle-height"
-            },
-            {
-              "description": "The border radius of the toggle",
-              "name": "--mdc-toggle-border-radius"
-            },
-            {
-              "description": "The border color of the toggle",
-              "name": "--mdc-toggle-border-color"
-            },
-            {
-              "description": "The background color of the toggle",
-              "name": "--mdc-toggle-background-color"
-            },
-            {
-              "description": "The icon color of the toggle",
-              "name": "--mdc-toggle-icon-color"
-            },
-            {
-              "description": "The icon background color of the toggle",
-              "name": "--mdc-toggle-icon-background-color"
-            },
-            {
-              "description": "Font size for the label text.",
-              "name": "--mdc-label-font-size",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Font weight for the label text.",
-              "name": "--mdc-label-font-weight",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Line height for the label text.",
-              "name": "--mdc-label-line-height",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Color for the label text.",
-              "name": "--mdc-label-color",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Font size for the help text.",
-              "name": "--mdc-help-text-font-size",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Font weight for the help text.",
-              "name": "--mdc-help-text-font-weight",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Line height for the help text.",
-              "name": "--mdc-help-text-line-height",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Color for the help text.",
-              "name": "--mdc-help-text-color",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Color for the required indicator text.",
-              "name": "--mdc-required-indicator-color",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            }
-          ],
           "cssParts": [
             {
               "description": "The label element.",
@@ -48677,11 +48591,11 @@
               }
             },
             {
-              "description": "The static-toggle element that wraps the toggle input.",
+              "description": "The statictoggle that provides the visual toggle switch appearance.",
               "name": "static-toggle"
             },
             {
-              "description": "The native checkbox input element styled as a toggle switch.",
+              "description": "The native checkbox input element that provides the interactive functionality.",
               "name": "toggle-input"
             }
           ],
@@ -48708,7 +48622,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
+              "description": "Controls the state of the toggle switch.\nWhen true, the toggle is in the \"on\" or \"active\" state.\nWhen false, the toggle is in the \"off\" or \"inactive\" state.",
               "attribute": "checked",
               "reflects": true
             },
@@ -48755,40 +48669,6 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "description": "Toggles the state of the toggle element.\nand dispatch the new change event."
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the toggle element.\nWhen the user presses Enter, the form is submitted."
-            },
             {
               "kind": "field",
               "name": "helpText",
@@ -48846,12 +48726,6 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "manageRequired",
-              "privacy": "private",
-              "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the required property is set, then the checkbox is invalid.\nIf the validationMessage is set, it will be used as the custom validity message.\nIf the validationMessage is not set, it will clear the custom validity message."
-            },
             {
               "kind": "field",
               "name": "name",
@@ -48980,27 +48854,6 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "setFormValue",
-              "privacy": "private",
-              "description": "Updates the form value to reflect the current state of the toggle.\nIf toggle is switched on, the value is set to either the user-provided value or 'isActive' if no value is provided.\nIf toggle is switched off, the value is set to null."
-            },
-            {
-              "kind": "method",
-              "name": "setToggleSize",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "size",
-                  "type": {
-                    "text": "ToggleSize"
-                  },
-                  "description": "The size to set."
-                }
-              ],
-              "description": "Sets the size attribute for the toggle component.\nIf the provided size is not included in the TOGGLE_SIZE,\nit defaults to the value specified in DEFAULTS.SIZE."
-            },
             {
               "kind": "method",
               "name": "setValidity",
@@ -49021,7 +48874,7 @@
               "type": {
                 "text": "ToggleSize"
               },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "description": "Specifies the size of the toggle component.\n- **default**: Standard size with 1.5rem height - suitable for most use cases\n- **compact**: Smaller size with 1rem height - ideal for space-constrained layouts",
               "default": "default",
               "attribute": "size",
               "reflects": true
@@ -49041,24 +48894,13 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "toggleState",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Toggles the state of the toggle element.\nIf the element is not disabled, soft-disabled, or readonly, then the checked property is toggled."
-            },
             {
               "kind": "field",
               "name": "toggletipPlacement",
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "attribute": "toggletip-placement",
               "reflects": true,
@@ -49073,7 +48915,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "attribute": "toggletip-strategy",
               "reflects": true,
@@ -49088,7 +48930,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "attribute": "toggletip-text",
               "reflects": true,
               "inheritedFrom": {
@@ -49171,7 +49013,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
+              "description": "Controls the state of the toggle switch.\nWhen true, the toggle is in the \"on\" or \"active\" state.\nWhen false, the toggle is in the \"off\" or \"inactive\" state.",
               "fieldName": "checked"
             },
             {
@@ -49179,7 +49021,7 @@
               "type": {
                 "text": "ToggleSize"
               },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "description": "Specifies the size of the toggle component.\n- **default**: Standard size with 1.5rem height - suitable for most use cases\n- **compact**: Smaller size with 1rem height - ideal for space-constrained layouts",
               "default": "default",
               "fieldName": "size"
             },
@@ -49315,7 +49157,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
               "fieldName": "toggletipText",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -49327,7 +49169,7 @@
               "type": {
                 "text": "PopoverPlacement"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
               "default": "'top'",
               "fieldName": "toggletipPlacement",
               "inheritedFrom": {
@@ -49340,7 +49182,7 @@
               "type": {
                 "text": "PopoverStrategy"
               },
-              "description": "The strategy of the toggletip that is displayed when the info icon is hovered.",
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
               "default": "'absolute'",
               "fieldName": "toggletipStrategy",
               "inheritedFrom": {
@@ -49406,7 +49248,7 @@
             "module": "/src/components/formfieldwrapper"
           },
           "tagName": "mdc-toggle",
-          "jsDoc": "/**\n * Toggle Component is an interactive control used to switch between two mutually exclusive options,\n * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n * It contains an optional label and an optional helper text.\n *\n * To create a group of toggles, use the FormFieldGroup component.\n *\n * Note: It internally renders a checkbox styled as a toggle switch.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-statictoggle\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-toggle\n *\n * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.\n *\n * @cssproperty --mdc-toggle-width - The width of the toggle\n * @cssproperty --mdc-toggle-height - The height of the toggle\n * @cssproperty --mdc-toggle-border-radius - The border radius of the toggle\n * @cssproperty --mdc-toggle-border-color - The border color of the toggle\n * @cssproperty --mdc-toggle-background-color - The background color of the toggle\n * @cssproperty --mdc-toggle-icon-color - The icon color of the toggle\n * @cssproperty --mdc-toggle-icon-background-color - The icon background color of the toggle\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart static-toggle - The static-toggle element that wraps the toggle input.\n * @csspart toggle-input - The native checkbox input element styled as a toggle switch.\n */",
+          "jsDoc": "/**\n * The Toggle component is an interactive control used to switch between two mutually exclusive states,\n * such as On/Off or Active/Inactive. It is commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n *\n * To create a group of toggles, use the `mdc-formfieldgroup` component.\n *\n * **Note:** This component internally renders a native checkbox input element styled as a toggle switch.\n *\n * ## When to use\n * Use toggles for binary choices where the change takes effect immediately, such as enabling/disabling settings or features.\n *\n * ## Accessibility\n * - Provide clear labels that describe what the toggle controls\n * - Use `data-aria-label` when a visual label is not present\n * - Keyboard navigation: Space to toggle, Tab to navigate, Enter to submit form\n *\n * ## Styling\n * Use the `static-toggle` part to apply custom styles to the toggle switch visual element.\n * This part exposes the underlying [StaticToggle](?path=/docs/components-decorator-statictoggle--docs) component for advanced styling.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-statictoggle\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-toggle\n *\n * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart static-toggle - The statictoggle that provides the visual toggle switch appearance.\n * @csspart toggle-input - The native checkbox input element that provides the interactive functionality.\n */",
           "customElement": true,
           "slots": [
             {
@@ -49441,6 +49283,80 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             }
+          ],
+          "cssProperties": [
+            {
+              "description": "Font size for the label text.",
+              "name": "--mdc-label-font-size",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Font weight for the label text.",
+              "name": "--mdc-label-font-weight",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Line height for the label text.",
+              "name": "--mdc-label-line-height",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Color for the label text.",
+              "name": "--mdc-label-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Font size for the help text.",
+              "name": "--mdc-help-text-font-size",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Font weight for the help text.",
+              "name": "--mdc-help-text-font-weight",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Line height for the help text.",
+              "name": "--mdc-help-text-line-height",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Color for the help text.",
+              "name": "--mdc-help-text-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Color for the required indicator text.",
+              "name": "--mdc-required-indicator-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            }
           ]
         }
       ],
@@ -55203,7 +55119,7 @@
               "type": {
                 "text": "CardOrientation"
               },
-              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
+              "description": "The orientation of the card.\n- `vertical`: Card in vertical layout with min-width of 20rem (default)\n- `horizontal`: Card in horizontal layout with min-width of 40rem",
               "default": "'vertical'",
               "attribute": "orientation",
               "reflects": true
@@ -55280,7 +55196,7 @@
               "type": {
                 "text": "CardVariant"
               },
-              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
+              "description": "The variant of the card that represents the border styling.\n- `border`: Card with border (default)\n- `ghost`: Card without border\n- `promotional`: Card with promotional styling",
               "default": "'border'",
               "attribute": "variant",
               "reflects": true
@@ -55328,7 +55244,7 @@
               "type": {
                 "text": "CardVariant"
               },
-              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
+              "description": "The variant of the card that represents the border styling.\n- `border`: Card with border (default)\n- `ghost`: Card without border\n- `promotional`: Card with promotional styling",
               "default": "'border'",
               "fieldName": "variant"
             },
@@ -55337,7 +55253,7 @@
               "type": {
                 "text": "CardOrientation"
               },
-              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
+              "description": "The orientation of the card.\n- `vertical`: Card in vertical layout with min-width of 20rem (default)\n- `horizontal`: Card in horizontal layout with min-width of 40rem",
               "default": "'vertical'",
               "fieldName": "orientation"
             },