@momentum-design/components 0.129.14 → 0.129.16

package/dist/custom-elements.json

@@ -1046,7 +1046,7 @@
               }
             },
             {
-              "description": "Borer color of the button",
+              "description": "Border color of the button",
               "name": "--mdc-button-border-color",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -1640,7 +1640,17 @@
           },
           "tagName": "mdc-alertchip",
           "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n * @csspart icon - The alert icon\n * @csspart label - The text label of the alertchip\n *\n * @event click - (React: onClick) This event is dispatched when the chip is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.\n * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.\n */",
-          "customElement": true
+          "customElement": true,
+          "slots": [
+            {
+              "description": "Text label of the button.",
+              "name": "",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -3628,7 +3638,7 @@
               }
             },
             {
-              "description": "Borer color of the button",
+              "description": "Border color of the button",
               "name": "--mdc-button-border-color",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -4362,7 +4372,17 @@
           },
           "tagName": "mdc-avatarbutton",
           "jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactive, clickable version of `mdc-avatar`.\n * It wraps the avatar component in a button, making it focusable and actionable.\n *\n * This component extends `buttonsimple` and includes all avatar display features (photo, initials, icon, counter, presence).\n * Use CSS parts to customize the avatar's appearance inside the button.\n *\n * ## Accessibility\n * - Always provide an `aria-label` attribute to describe the button's purpose\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) Dispatched when the avatar button is clicked.\n * @event keydown - (React: onKeyDown) Dispatched when a key is pressed on the avatar button.\n * @event keyup - (React: onKeyUp) Dispatched when a key is released on the avatar button.\n * @event focus - (React: onFocus) Dispatched when the avatar button receives focus.\n *\n * @tagname mdc-avatarbutton\n *\n * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state.\n * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state.\n * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state.\n *\n * @csspart overlay - The overlay part of the avatar button.\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo part of the avatar.\n * @csspart presence - The presence indicator part of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator of the avatar.\n * @csspart loader - The loading indicator part of the avatar.\n */",
-          "customElement": true
+          "customElement": true,
+          "slots": [
+            {
+              "description": "Text label of the button.",
+              "name": "",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -4886,6 +4906,16 @@
           "kind": "class",
           "description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
           "name": "Brandvisual",
+          "cssParts": [
+            {
+              "description": "Set styles for the brandvisual svg container",
+              "name": "brandvisual"
+            },
+            {
+              "description": "Set styles for the brandvisual image container",
+              "name": "brandvisualImage"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -4894,7 +4924,7 @@
                 "text": "string | undefined"
               },
               "description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
-              "attribute": "altText",
+              "attribute": "alt-text",
               "reflects": true
             },
             {
@@ -5026,7 +5056,7 @@
               "fieldName": "name"
             },
             {
-              "name": "altText",
+              "name": "alt-text",
               "type": {
                 "text": "string | undefined"
               },
@@ -5039,7 +5069,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-brandvisual",
-          "jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
+          "jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n * @csspart brandvisual - Set styles for the brandvisual svg container\n * @csspart brandvisualImage - Set styles for the brandvisual image container\n */",
           "customElement": true
         }
       ],
@@ -5088,7 +5118,7 @@
                 "text": "Size"
               },
               "privacy": "public",
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "description": "Specifies the size of the bullet visual indicator.\n\n- `small` (default): 0.25rem (4px) - Compact bullet for dense layouts\n- `medium`: 0.5rem (8px) - Standard bullet for most use cases\n- `large`: 1rem (16px) - Prominent bullet for emphasis",
               "default": "small",
               "attribute": "size",
               "reflects": true
@@ -5100,7 +5130,7 @@
               "type": {
                 "text": "Size"
               },
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "description": "Specifies the size of the bullet visual indicator.\n\n- `small` (default): 0.25rem (4px) - Compact bullet for dense layouts\n- `medium`: 0.5rem (8px) - Standard bullet for most use cases\n- `large`: 1rem (16px) - Prominent bullet for emphasis",
               "default": "small",
               "fieldName": "size"
             }
@@ -5131,7 +5161,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-button` is a component that can be configured in various ways to suit different use cases.\n\nButton Variants:\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n\nButton Colors:\n- **Positive**: Green color.\n- **Negative**: Red color.\n- **Accent**: Blue color.\n- **Promotional**: Purple color.\n- **Default**: White color.\n\nButton Sizes (in REM units):\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- **Tertiary icon button**: 20.\n\nButton Types:\n- **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n- **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n- **Icon button**: A button represented by just an icon without any text.\nThe type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots.",
+          "description": "`mdc-button` is a component that can be configured in various ways to suit different use cases.\n\n## Button configuration\n\nThe appearance of the button depends on combination of multiple attributes.\n\n### Button Types\n\nThe type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots:\n\n- **Pill button**: Contains text value, commonly used for call to action, tags, or filters\n- **Pill button with icons**: Contains an icon on the left or right side of the button\n- **Icon button**: Represented by just an icon without any text\n\n### Button Variants:\n\nOptions for button backgrounds and borders:\n\n- **Primary**: Solid background color\n- **Secondary**: Transparent background with solid border\n- **Tertiary**: No background or border, text-only appearance\n\n### Button Colors\n\nColor options for **Primary** and **Secondary** buttons:\n\n- **Default**: For standard actions\n- **Positive**: For success or confirmation actions\n- **Negative**: For destructive or error actions\n- **Accent**: For informational actions\n- **Promotional**: For promotional actions\n\n### Button Sizes\n\nSize options for different button configurations in REM:\n\n- **Pill button**: 40, 32, 28, 24\n- **Icon button**: 64, 52, 40, 32, 28, 24\n- **Tertiary icon button**: 20",
           "name": "Button",
           "cssProperties": [
             {
@@ -5191,12 +5221,24 @@
             {
               "description": "Content after the text label, passed in `postfix` slot",
               "name": "postfix"
+            },
+            {
+              "description": "Icon element displayed before the text label when `prefix-icon` attribute is set",
+              "name": "prefix-icon"
+            },
+            {
+              "description": "Icon element displayed after the text label when `postfix-icon` attribute is set",
+              "name": "postfix-icon"
             }
           ],
           "slots": [
             {
               "description": "Text label of the button.",
-              "name": ""
+              "name": "",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
               "description": "Content to be displayed before the text label.",
@@ -5259,7 +5301,7 @@
               "type": {
                 "text": "ButtonColor"
               },
-              "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
+              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons always use default color.",
               "default": "default",
               "attribute": "color",
               "inheritedFrom": {
@@ -5377,7 +5419,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "The button color can be inverted by setting the inverted attribute to true.\n\nOnly applies when variant is set to `primary`, color is set to `default`\nand button is not `active`.",
+              "description": "Inverts the button's color scheme for use on dark backgrounds.\nWhen enabled, the button adapts its colors to maintain proper contrast on inverted surfaces.\n\n**Requirements:**\n- Only works with `variant=\"primary\"`\n- Only works with `color=\"default\"`\n- Button must not be in `active` state\n\n**Use case:** Place buttons on dark-colored backgrounds or inverted theme sections.",
               "default": "false",
               "attribute": "inverted",
               "reflects": true
@@ -5402,7 +5444,7 @@
               "type": {
                 "text": "IconNames | undefined"
               },
-              "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
+              "description": "The name of the icon to display after the button text (right side in LTR layouts).\nWhen set without text content, creates an icon-only button.\nIcons automatically change to their filled variant when the button is in active state.",
               "attribute": "postfix-icon",
               "reflects": true,
               "inheritedFrom": {
@@ -5416,7 +5458,7 @@
               "type": {
                 "text": "IconNames | undefined"
               },
-              "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
+              "description": "The name of the icon to display before the button text (left side in LTR layouts).\nWhen set without text content, creates an icon-only button.\nIcons automatically change to their filled variant when the button is in active state.",
               "attribute": "prefix-icon",
               "reflects": true,
               "inheritedFrom": {
@@ -5582,7 +5624,7 @@
               "type": {
                 "text": "ButtonSize"
               },
-              "description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
+              "description": "Specifies the size of the button in pixels. Available sizes depend on the button type:\n\n**Pill button** (with text):\n- `40`: Large size (2.5rem)\n- `32`: Default size (2rem)\n- `28`: Medium size (1.75rem)\n- `24`: Small size (1.5rem)\n\n**Icon button** (icon only):\n- `64`: Extra large (4rem)\n- `52`: Large (3.25rem)\n- `40`: Medium-large (2.5rem)\n- `32`: Default (2rem)\n- `28`: Medium (1.75rem)\n- `24`: Small (1.5rem)\n- `20`: Extra small (1.25rem) - Only available for tertiary variant",
               "default": "32",
               "attribute": "size",
               "reflects": true,
@@ -5665,7 +5707,7 @@
               "type": {
                 "text": "ButtonVariant"
               },
-              "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
+              "description": "The visual style variant of the button.\n- `primary`: Solid background color\n- `secondary`: Transparent background with solid border\n- `tertiary`: No background or border, text-only appearance",
               "default": "primary",
               "attribute": "variant",
               "inheritedFrom": {
@@ -5680,7 +5722,7 @@
               "type": {
                 "text": "ButtonSize"
               },
-              "description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
+              "description": "Specifies the size of the button in pixels. Available sizes depend on the button type:\n\n**Pill button** (with text):\n- `40`: Large size (2.5rem)\n- `32`: Default size (2rem)\n- `28`: Medium size (1.75rem)\n- `24`: Small size (1.5rem)\n\n**Icon button** (icon only):\n- `64`: Extra large (4rem)\n- `52`: Large (3.25rem)\n- `40`: Medium-large (2.5rem)\n- `32`: Default (2rem)\n- `28`: Medium (1.75rem)\n- `24`: Small (1.5rem)\n- `20`: Extra small (1.25rem) - Only available for tertiary variant",
               "default": "32",
               "fieldName": "size",
               "inheritedFrom": {
@@ -5693,7 +5735,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "The button color can be inverted by setting the inverted attribute to true.\n\nOnly applies when variant is set to `primary`, color is set to `default`\nand button is not `active`.",
+              "description": "Inverts the button's color scheme for use on dark backgrounds.\nWhen enabled, the button adapts its colors to maintain proper contrast on inverted surfaces.\n\n**Requirements:**\n- Only works with `variant=\"primary\"`\n- Only works with `color=\"default\"`\n- Button must not be in `active` state\n\n**Use case:** Place buttons on dark-colored backgrounds or inverted theme sections.",
               "default": "false",
               "fieldName": "inverted"
             },
@@ -5715,7 +5757,7 @@
               "type": {
                 "text": "IconNames | undefined"
               },
-              "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
+              "description": "The name of the icon to display before the button text (left side in LTR layouts).\nWhen set without text content, creates an icon-only button.\nIcons automatically change to their filled variant when the button is in active state.",
               "fieldName": "prefixIcon",
               "inheritedFrom": {
                 "name": "ButtonComponentMixin",
@@ -5727,7 +5769,7 @@
               "type": {
                 "text": "IconNames | undefined"
               },
-              "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
+              "description": "The name of the icon to display after the button text (right side in LTR layouts).\nWhen set without text content, creates an icon-only button.\nIcons automatically change to their filled variant when the button is in active state.",
               "fieldName": "postfixIcon",
               "inheritedFrom": {
                 "name": "ButtonComponentMixin",
@@ -5739,7 +5781,7 @@
               "type": {
                 "text": "ButtonVariant"
               },
-              "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
+              "description": "The visual style variant of the button.\n- `primary`: Solid background color\n- `secondary`: Transparent background with solid border\n- `tertiary`: No background or border, text-only appearance",
               "default": "primary",
               "fieldName": "variant",
               "inheritedFrom": {
@@ -5752,7 +5794,7 @@
               "type": {
                 "text": "ButtonColor"
               },
-              "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
+              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons always use default color.",
               "default": "default",
               "fieldName": "color",
               "inheritedFrom": {
@@ -5887,7 +5929,7 @@
             "module": "/src/components/buttonsimple/buttonsimple.component"
           },
           "tagName": "mdc-button",
-          "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * Button Variants:\n * - **Primary**: Solid background color.\n * - **Secondary**: Transparent background with a solid border.\n * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n *\n * Button Colors:\n * - **Positive**: Green color.\n * - **Negative**: Red color.\n * - **Accent**: Blue color.\n * - **Promotional**: Purple color.\n * - **Default**: White color.\n *\n * Button Sizes (in REM units):\n * - **Pill button**: 40, 32, 28, 24.\n * - **Icon button**: 64, 52, 40, 32, 28, 24.\n * - **Tertiary icon button**: 20.\n *\n * Button Types:\n * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n * - **Icon button**: A button represented by just an icon without any text.\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n * @slot prefix - Content to be displayed before the text label.\n * @slot postfix - Content to be displayed after the text label.\n *\n * @csspart button-text - Text label of the button, passed in default slot\n * @csspart prefix - Content before the text label, passed in `prefix` slot\n * @csspart postfix - Content after the text label, passed in `postfix` slot\n *\n * @cssproperty --mdc-button-height - Height for button size\n * @cssproperty --mdc-button-background - Background of the button\n * @cssproperty --mdc-button-border-color - Borer color of the button\n * @cssproperty --mdc-button-text-color - Text color of the button\n * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon\n * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon\n * @cssproperty --mdc-button-line-height - Line height of the button text\n */",
+          "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * ## Button configuration\n *\n * The appearance of the button depends on combination of multiple attributes.\n *\n * ### Button Types\n * \n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots:\n * \n * - **Pill button**: Contains text value, commonly used for call to action, tags, or filters\n * - **Pill button with icons**: Contains an icon on the left or right side of the button\n * - **Icon button**: Represented by just an icon without any text\n * \n * ### Button Variants:\n *\n * Options for button backgrounds and borders:\n * \n * - **Primary**: Solid background color\n * - **Secondary**: Transparent background with solid border\n * - **Tertiary**: No background or border, text-only appearance\n *\n * ### Button Colors\n * \n * Color options for **Primary** and **Secondary** buttons:\n *\n * - **Default**: For standard actions\n * - **Positive**: For success or confirmation actions\n * - **Negative**: For destructive or error actions\n * - **Accent**: For informational actions\n * - **Promotional**: For promotional actions\n *\n * ### Button Sizes\n * \n * Size options for different button configurations in REM:\n * \n * - **Pill button**: 40, 32, 28, 24\n * - **Icon button**: 64, 52, 40, 32, 28, 24\n * - **Tertiary icon button**: 20\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n * @slot prefix - Content to be displayed before the text label.\n * @slot postfix - Content to be displayed after the text label.\n *\n * @csspart button-text - Text label of the button, passed in default slot\n * @csspart prefix - Content before the text label, passed in `prefix` slot\n * @csspart postfix - Content after the text label, passed in `postfix` slot\n * @csspart prefix-icon - Icon element displayed before the text label when `prefix-icon` attribute is set\n * @csspart postfix-icon - Icon element displayed after the text label when `postfix-icon` attribute is set\n *\n * @cssproperty --mdc-button-height - Height for button size\n * @cssproperty --mdc-button-background - Background of the button\n * @cssproperty --mdc-button-border-color - Borer color of the button\n * @cssproperty --mdc-button-text-color - Text color of the button\n * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon\n * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon\n * @cssproperty --mdc-button-line-height - Line height of the button text\n */",
           "customElement": true,
           "events": [
             {
@@ -5946,7 +5988,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "buttongroup component, is a wrapper to group multiple buttons.\nIt can support icon buttons, combination of icon and pill buttons, and text buttons.\nButton group can be positioned in horizontal orientation and vertical orientation.\n\nThe sizes of buttons within the button group can be set using the `size` attribute on the button group,\nwhich will apply the size to all buttons within the group.\n\nButtons of sizes 24, 28, 32, and 40 are only supported inside a button group. Default size is 28.\n\nThe variant of buttons within the button group can be set using the `variant` attribute on the button group,\nwhich will apply the variant to all buttons within the group. Default variant is `primary`.\n\nAll buttons are placed horizontally by default. To change the orientation to vertical, set the `orientation` attribute to `vertical`.\n\nThings to note:\n- Button group will allow only `mdc-button` components as its direct children.\n- Button group will set the `size` and `variant` attributes on the buttons within it,\n  so any `size` or `variant` set directly on any button will be overridden.",
+          "description": "`mdc-buttongroup` is a wrapper component that groups multiple buttons together.\n\n## Supported button types\n- Icon buttons\n- Pill buttons\n- Combination of icon and pill buttons\n\n## Features\n- Horizontal or vertical orientation\n- Unified size and variant applied to all child buttons\n- Optional compact mode for reduced height\n- Supported sizes: 24, 28 (default), 32, 40\n\n## Usage\n- Only `mdc-button` components are allowed as direct children\n- The `size` and `variant` set on buttongroup override individual button settings",
           "name": "ButtonGroup",
           "cssProperties": [
             {
@@ -5982,7 +6024,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
+              "description": "Enables compact mode with reduced height.\nWhen true, all buttons have a fixed height of 24px regardless of their size setting.\nUseful for space-constrained layouts.",
               "attribute": "compact",
               "reflects": true
             },
@@ -5992,7 +6034,7 @@
               "type": {
                 "text": "ButtonGroupOrientation"
               },
-              "description": "Orientation of the buttongroup.",
+              "description": "Layout direction of the buttons within the group.\n- `horizontal`: Buttons are arranged side by side (default)\n- `vertical`: Buttons are stacked vertically",
               "default": "'horizontal'",
               "attribute": "orientation",
               "reflects": true
@@ -6003,8 +6045,8 @@
               "type": {
                 "text": "ButtonGroupSize"
               },
-              "description": "Size of the buttons within the buttongroup.",
-              "default": "'28'",
+              "description": "Size applied to all buttons in the group.\nAvailable sizes: 24, 28, 32, 40",
+              "default": "28",
               "attribute": "size",
               "reflects": true
             },
@@ -6014,7 +6056,7 @@
               "type": {
                 "text": "ButtonGroupVariant"
               },
-              "description": "Variant of the buttons within the buttongroup.",
+              "description": "Visual style variant applied to all buttons in the group.\n- `primary`: Solid background color\n- `secondary`: Transparent background with solid border\n- `tertiary`: No background or border, text-only appearance",
               "default": "'primary'",
               "attribute": "variant",
               "reflects": true
@@ -6026,7 +6068,7 @@
               "type": {
                 "text": "ButtonGroupOrientation"
               },
-              "description": "Orientation of the buttongroup.",
+              "description": "Layout direction of the buttons within the group.\n- `horizontal`: Buttons are arranged side by side (default)\n- `vertical`: Buttons are stacked vertically",
               "default": "'horizontal'",
               "fieldName": "orientation"
             },
@@ -6035,7 +6077,7 @@
               "type": {
                 "text": "ButtonGroupVariant"
               },
-              "description": "Variant of the buttons within the buttongroup.",
+              "description": "Visual style variant applied to all buttons in the group.\n- `primary`: Solid background color\n- `secondary`: Transparent background with solid border\n- `tertiary`: No background or border, text-only appearance",
               "default": "'primary'",
               "fieldName": "variant"
             },
@@ -6044,8 +6086,8 @@
               "type": {
                 "text": "ButtonGroupSize"
               },
-              "description": "Size of the buttons within the buttongroup.",
-              "default": "'28'",
+              "description": "Size applied to all buttons in the group.\nAvailable sizes: 24, 28, 32, 40",
+              "default": "28",
               "fieldName": "size"
             },
             {
@@ -6054,7 +6096,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
+              "description": "Enables compact mode with reduced height.\nWhen true, all buttons have a fixed height of 24px regardless of their size setting.\nUseful for space-constrained layouts.",
               "fieldName": "compact"
             }
           ],
@@ -6063,7 +6105,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-buttongroup",
-          "jsDoc": "/**\n * buttongroup component, is a wrapper to group multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * Button group can be positioned in horizontal orientation and vertical orientation.\n *\n * The sizes of buttons within the button group can be set using the `size` attribute on the button group,\n * which will apply the size to all buttons within the group.\n *\n * Buttons of sizes 24, 28, 32, and 40 are only supported inside a button group. Default size is 28.\n *\n * The variant of buttons within the button group can be set using the `variant` attribute on the button group,\n * which will apply the variant to all buttons within the group. Default variant is `primary`.\n *\n * All buttons are placed horizontally by default. To change the orientation to vertical, set the `orientation` attribute to `vertical`.\n *\n * Things to note:\n * - Button group will allow only `mdc-button` components as its direct children.\n * - Button group will set the `size` and `variant` attributes on the buttons within it,\n *   so any `size` or `variant` set directly on any button will be overridden.\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n *\n * @csspart container - The container of the buttongroup.\n */",
+          "jsDoc": "/**\n * `mdc-buttongroup` is a wrapper component that groups multiple buttons together.\n *\n * ## Supported button types\n * - Icon buttons\n * - Pill buttons\n * - Combination of icon and pill buttons\n *\n * ## Features\n * - Horizontal or vertical orientation\n * - Unified size and variant applied to all child buttons\n * - Optional compact mode for reduced height\n * - Supported sizes: 24, 28 (default), 32, 40\n *\n * ## Usage\n * - Only `mdc-button` components are allowed as direct children\n * - The `size` and `variant` set on buttongroup override individual button settings\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n *\n * @csspart container - The container of the buttongroup.\n */",
           "customElement": true
         }
       ],
@@ -6223,7 +6265,7 @@
               "type": {
                 "text": "ButtonColor"
               },
-              "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
+              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons always use default color.",
               "default": "default",
               "attribute": "color",
               "inheritedFrom": {
@@ -6391,7 +6433,7 @@
               "type": {
                 "text": "IconNames | undefined"
               },
-              "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
+              "description": "The name of the icon to display after the button text (right side in LTR layouts).\nWhen set without text content, creates an icon-only button.\nIcons automatically change to their filled variant when the button is in active state.",
               "attribute": "postfix-icon",
               "reflects": true,
               "inheritedFrom": {
@@ -6405,7 +6447,7 @@
               "type": {
                 "text": "IconNames | undefined"
               },
-              "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
+              "description": "The name of the icon to display before the button text (left side in LTR layouts).\nWhen set without text content, creates an icon-only button.\nIcons automatically change to their filled variant when the button is in active state.",
               "attribute": "prefix-icon",
               "reflects": true,
               "inheritedFrom": {
@@ -6602,7 +6644,7 @@
               "type": {
                 "text": "ButtonVariant"
               },
-              "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
+              "description": "The visual style variant of the button.\n- `primary`: Solid background color\n- `secondary`: Transparent background with solid border\n- `tertiary`: No background or border, text-only appearance",
               "default": "primary",
               "attribute": "variant",
               "inheritedFrom": {
@@ -6673,7 +6715,7 @@
               "type": {
                 "text": "IconNames | undefined"
               },
-              "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
+              "description": "The name of the icon to display before the button text (left side in LTR layouts).\nWhen set without text content, creates an icon-only button.\nIcons automatically change to their filled variant when the button is in active state.",
               "fieldName": "prefixIcon",
               "inheritedFrom": {
                 "name": "ButtonComponentMixin",
@@ -6685,7 +6727,7 @@
               "type": {
                 "text": "IconNames | undefined"
               },
-              "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
+              "description": "The name of the icon to display after the button text (right side in LTR layouts).\nWhen set without text content, creates an icon-only button.\nIcons automatically change to their filled variant when the button is in active state.",
               "fieldName": "postfixIcon",
               "inheritedFrom": {
                 "name": "ButtonComponentMixin",
@@ -6697,7 +6739,7 @@
               "type": {
                 "text": "ButtonVariant"
               },
-              "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
+              "description": "The visual style variant of the button.\n- `primary`: Solid background color\n- `secondary`: Transparent background with solid border\n- `tertiary`: No background or border, text-only appearance",
               "default": "primary",
               "fieldName": "variant",
               "inheritedFrom": {
@@ -6710,7 +6752,7 @@
               "type": {
                 "text": "ButtonColor"
               },
-              "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
+              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons always use default color.",
               "default": "default",
               "fieldName": "color",
               "inheritedFrom": {
@@ -6912,7 +6954,7 @@
               "name": "--mdc-button-background"
             },
             {
-              "description": "Borer color of the button",
+              "description": "Border color of the button",
               "name": "--mdc-button-border-color"
             },
             {
@@ -6920,6 +6962,12 @@
               "name": "--mdc-button-text-color"
             }
           ],
+          "slots": [
+            {
+              "description": "Text label of the button.",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -7319,7 +7367,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-buttonsimple",
-          "jsDoc": "/**\n * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\n * It is used as an internal component and is not intended to be used directly by consumers.\n * Consumers should use the `mdc-button` component instead.\n *\n * @event click - (React: onClick) This event is dispatched when the button is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.\n * @event focus - (React: onFocus) This event is dispatched when the button receives focus.\n *\n * @tagname mdc-buttonsimple\n *\n * @cssproperty --mdc-button-height - Height for button size\n * @cssproperty --mdc-button-background - Background color of the button\n * @cssproperty --mdc-button-border-color - Borer color of the button\n * @cssproperty --mdc-button-text-color - Text color of the button\n */",
+          "jsDoc": "/**\n * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\n * It is used as an internal component and is not intended to be used directly by consumers.\n * Consumers should use the `mdc-button` component instead.\n *\n * @tagname mdc-buttonsimple\n *\n * @slot - Text label of the button.\n *\n * @event click - (React: onClick) This event is dispatched when the button is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.\n * @event focus - (React: onFocus) This event is dispatched when the button receives focus.\n *\n * @cssproperty --mdc-button-height - Height for button size\n * @cssproperty --mdc-button-background - Background color of the button\n * @cssproperty --mdc-button-border-color - Border color of the button\n * @cssproperty --mdc-button-text-color - Text color of the button\n */",
           "customElement": true
         }
       ],
@@ -7809,7 +7857,7 @@
               }
             },
             {
-              "description": "Borer color of the button",
+              "description": "Border color of the button",
               "name": "--mdc-button-border-color",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -7891,6 +7939,14 @@
             {
               "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
               "name": "footer-button-primary"
+            },
+            {
+              "description": "Text label of the button.",
+              "name": "",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             }
           ],
           "members": [
@@ -11181,7 +11237,7 @@
               }
             },
             {
-              "description": "Borer color of the button",
+              "description": "Border color of the button",
               "name": "--mdc-button-border-color",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -11782,7 +11838,17 @@
           },
           "tagName": "mdc-chip",
           "jsDoc": "/**\n * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.\n * Consumers can wrap this component around a tooltip to provide additional context.\n *\n * It is recommended to keep the label text for the chip component concise and compact.\n * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,\n * including empty spaces to split words.\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-chip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n * @cssproperty --mdc-button-height - Height for button size\n *\n * @csspart label - The label part of the chip.\n *\n * @event click - (React: onClick) This event is dispatched when the chip is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.\n * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.\n *\n */",
-          "customElement": true
+          "customElement": true,
+          "slots": [
+            {
+              "description": "Text label of the button.",
+              "name": "",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -16659,7 +16725,7 @@
               }
             },
             {
-              "description": "Borer color of the button",
+              "description": "Border color of the button",
               "name": "--mdc-button-border-color",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -17318,7 +17384,17 @@
           },
           "tagName": "mdc-filterchip",
           "jsDoc": "/**\n * mdc-filterchip component is an interactive chip that consumers can use to select or deselect.\n * They can be found with lists or tables as quick filters.\n *\n * This component is built on top of the mdc-chip component.\n *\n * @tagname mdc-filterchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @csspart label - The label part of the chip.\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n * @event click - (React: onClick) This event is dispatched when the chip is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.\n * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.\n */",
-          "customElement": true
+          "customElement": true,
+          "slots": [
+            {
+              "description": "Text label of the button.",
+              "name": "",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -21225,7 +21301,7 @@
               }
             },
             {
-              "description": "Borer color of the button",
+              "description": "Border color of the button",
               "name": "--mdc-button-border-color",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -21244,7 +21320,11 @@
           "slots": [
             {
               "description": "Text label of the linkbutton.",
-              "name": ""
+              "name": "",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             }
           ],
           "members": [
@@ -45728,7 +45808,7 @@
               }
             },
             {
-              "description": "Borer color of the button",
+              "description": "Border color of the button",
               "name": "--mdc-button-border-color",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -46405,7 +46485,17 @@
           },
           "tagName": "mdc-tab",
           "jsDoc": "/**\n * `mdc-tab` is Tab component to be used within the Tabgroup.\n *\n * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.\n *\n * Pass attribute `tabid` when using inside of `tablist` component.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * The `slot=\"chip\"` can be used to add a chip to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * Note: Icons can be used in conjunction with badges or chips.\n * Badges and chips should not be used at the same time.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the tab is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.\n * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.\n * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes\n * <br />\n * Event Data: `detail: { tabId: this.tabId, active }`\n * <br />\n * Note: the activechange event is used by the tab list component to react to the change in state of the tab,\n * so this event won't be needed if the tab list is used.\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-tab-height - The height of the tab.\n * @cssproperty --mdc-tab-padding-left - The left padding of the tab.\n * @cssproperty --mdc-tab-padding-right - The right padding of the tab.\n * @cssproperty --mdc-tab-content-gap - The gap between the icon and text in the tab.\n * @cssproperty --mdc-tab-background-color - The background color of the tab.\n * @cssproperty --mdc-tab-color - The text color of the tab.\n * @cssproperty --mdc-tab-border-radius - The border radius of the tab.\n *\n * @cssproperty --mdc-tab-line-active-indicator-height - The height of the active indicator line.\n * @cssproperty --mdc-tab-line-active-indicator-width - The width of the active indicator line.\n *\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - The border bottom left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - The border bottom right radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.\n *\n *\n *\n * @csspart container - The container of the tab.\n * @csspart icon - The icon of the tab.\n * @csspart indicator - The indicator of the tab.\n * @csspart text - The text of the tab.\n */",
-          "customElement": true
+          "customElement": true,
+          "slots": [
+            {
+              "description": "Text label of the button.",
+              "name": "",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -54719,7 +54809,7 @@
               "type": {
                 "text": "ButtonColor"
               },
-              "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
+              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons always use default color.",
               "default": "default",
               "attribute": "color"
             },
@@ -54741,7 +54831,7 @@
               "type": {
                 "text": "IconNames | undefined"
               },
-              "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
+              "description": "The name of the icon to display after the button text (right side in LTR layouts).\nWhen set without text content, creates an icon-only button.\nIcons automatically change to their filled variant when the button is in active state.",
               "attribute": "postfix-icon",
               "reflects": true
             },
@@ -54751,7 +54841,7 @@
               "type": {
                 "text": "IconNames | undefined"
               },
-              "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
+              "description": "The name of the icon to display before the button text (left side in LTR layouts).\nWhen set without text content, creates an icon-only button.\nIcons automatically change to their filled variant when the button is in active state.",
               "attribute": "prefix-icon",
               "reflects": true
             },
@@ -54806,7 +54896,7 @@
               "type": {
                 "text": "ButtonVariant"
               },
-              "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
+              "description": "The visual style variant of the button.\n- `primary`: Solid background color\n- `secondary`: Transparent background with solid border\n- `tertiary`: No background or border, text-only appearance",
               "default": "primary",
               "attribute": "variant"
             }
@@ -54817,7 +54907,7 @@
               "type": {
                 "text": "IconNames | undefined"
               },
-              "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
+              "description": "The name of the icon to display before the button text (left side in LTR layouts).\nWhen set without text content, creates an icon-only button.\nIcons automatically change to their filled variant when the button is in active state.",
               "fieldName": "prefixIcon"
             },
             {
@@ -54825,7 +54915,7 @@
               "type": {
                 "text": "IconNames | undefined"
               },
-              "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
+              "description": "The name of the icon to display after the button text (right side in LTR layouts).\nWhen set without text content, creates an icon-only button.\nIcons automatically change to their filled variant when the button is in active state.",
               "fieldName": "postfixIcon"
             },
             {
@@ -54833,7 +54923,7 @@
               "type": {
                 "text": "ButtonVariant"
               },
-              "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
+              "description": "The visual style variant of the button.\n- `primary`: Solid background color\n- `secondary`: Transparent background with solid border\n- `tertiary`: No background or border, text-only appearance",
               "default": "primary",
               "fieldName": "variant"
             },
@@ -54842,7 +54932,7 @@
               "type": {
                 "text": "ButtonColor"
               },
-              "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
+              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons always use default color.",
               "default": "default",
               "fieldName": "color"
             }