@momentum-design/components 0.129.13 → 0.129.15

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": [
@@ -3267,37 +3277,43 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
+          "description": "The `mdc-appheader` component provides a structured and accessible app header layout with three sections: leading, center, and trailing.\n\n## Layout sections\n- **Leading** - Typically holds brand logo, brand name, or menu icon\n- **Center** - Can contain search bar, icons, navigation links, or action controls\n- **Trailing** - Generally includes profile avatar, icons, settings, or additional action controls\n\nEach section automatically handles flex alignment: leading aligns left, center aligns center, trailing aligns right.",
           "name": "Appheader",
+          "cssProperties": [
+            {
+              "description": "Height of the app header. Default is 4rem (64px).",
+              "name": "--mdc-appheader-height"
+            }
+          ],
           "cssParts": [
             {
-              "description": "The main container for styling the header.",
+              "description": "The main header container.",
               "name": "container"
             },
             {
-              "description": "The leading section of the header.",
+              "description": "The leading section wrapper (left side).",
               "name": "leading-section"
             },
             {
-              "description": "The center section of the header.",
+              "description": "The center section wrapper (middle).",
               "name": "center-section"
             },
             {
-              "description": "The trailing section of the header.",
+              "description": "The trailing section wrapper (right side).",
               "name": "trailing-section"
             }
           ],
           "slots": [
             {
-              "description": "Slot for the leading section (e.g., brand logo, brand name).",
+              "description": "Content for the leading section (left-aligned).",
               "name": "leading"
             },
             {
-              "description": "Slot for the center section (e.g., search bar, icons).",
+              "description": "Content for the center section (center-aligned).",
               "name": "center"
             },
             {
-              "description": "Slot for the trailing section (e.g., profile avatar, icons).",
+              "description": "Content for the trailing section (right-aligned).",
               "name": "trailing"
             }
           ],
@@ -3307,7 +3323,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-appheader",
-          "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
+          "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout with three sections: leading, center, and trailing.\n *\n * ## Layout sections\n * - **Leading** - Typically holds brand logo, brand name, or menu icon\n * - **Center** - Can contain search bar, icons, navigation links, or action controls\n * - **Trailing** - Generally includes profile avatar, icons, settings, or additional action controls\n *\n * Each section automatically handles flex alignment: leading aligns left, center aligns center, trailing aligns right.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Content for the leading section (left-aligned).\n * @slot center - Content for the center section (center-aligned).\n * @slot trailing - Content for the trailing section (right-aligned).\n *\n * @cssproperty --mdc-appheader-height - Height of the app header. Default is 4rem (64px).\n *\n * @csspart container - The main header container.\n * @csspart leading-section - The leading section wrapper (left side).\n * @csspart center-section - The center section wrapper (middle).\n * @csspart trailing-section - The trailing section wrapper (right side).\n */",
           "customElement": true
         }
       ],
@@ -3328,7 +3344,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
+          "description": "The `mdc-avatar` component represents a person or a space. It displays as a photo, initials, icon, or counter.\n\n## Display Priority\n\nWhen multiple attributes are provided, the component determines what to display based on this priority:\n1. **Photo** (`src`) - Takes highest priority\n   - While loading: Shows `initials` as placeholder if provided (instant), otherwise shows icon (requires loading)\n   - After loading: Shows the photo\n   - On error: Placeholder remains visible (initials or icon)\n2. **Icon** (`icon-name`) - Takes priority if no `src` is provided\n   - Shows custom icon if `icon-name` is set (requires icon library to load)\n   - **Note:** If both `icon-name` and `initials` are provided (without `src`), icon takes precedence and initials are ignored.\n     This means users may see a delay while the icon loads, even though initials render instantly.\n   - Defaults to `user-regular` icon if no other content is available\n3. **Initials** (`initials`) - Displayed only if no `src` or `icon-name` is provided\n   - Shows first two characters, converted to uppercase\n   - Renders instantly (no loading required)\n4. **Counter** (`counter`) - Displayed only if none of the above are provided\n   - Shows numeric value (max 99+)\n   - Negative values display as 0\n\n## Behavior\n- Non-interactive and non-focusable component (use `mdc-avatarbutton` for clickable avatars)\n- Shows loading indicator overlay when `is-typing` is true (displays on top of existing content)\n- Presence indicator hidden when counter is set or when typing",
           "name": "Avatar",
           "cssProperties": [
             {
@@ -3481,7 +3497,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-avatar",
-          "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n *\n * @csspart photo - The photo of the avatar.\n * @csspart presence - The presence indicator of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator.\n * @csspart loader - The loading indicator of the avatar.\n */",
+          "jsDoc": "/**\n * The `mdc-avatar` component represents a person or a space. It displays as a photo, initials, icon, or counter.\n *\n * ## Display Priority\n *\n * When multiple attributes are provided, the component determines what to display based on this priority:\n * 1. **Photo** (`src`) - Takes highest priority\n *    - While loading: Shows `initials` as placeholder if provided (instant), otherwise shows icon (requires loading)\n *    - After loading: Shows the photo\n *    - On error: Placeholder remains visible (initials or icon)\n * 2. **Icon** (`icon-name`) - Takes priority if no `src` is provided\n *    - Shows custom icon if `icon-name` is set (requires icon library to load)\n *    - **Note:** If both `icon-name` and `initials` are provided (without `src`), icon takes precedence and initials are ignored.\n *      This means users may see a delay while the icon loads, even though initials render instantly.\n *    - Defaults to `user-regular` icon if no other content is available\n * 3. **Initials** (`initials`) - Displayed only if no `src` or `icon-name` is provided\n *    - Shows first two characters, converted to uppercase\n *    - Renders instantly (no loading required)\n * 4. **Counter** (`counter`) - Displayed only if none of the above are provided\n *    - Shows numeric value (max 99+)\n *    - Negative values display as 0\n *\n * ## Behavior\n * - Non-interactive and non-focusable component (use `mdc-avatarbutton` for clickable avatars)\n * - Shows loading indicator overlay when `is-typing` is true (displays on top of existing content)\n * - Presence indicator hidden when counter is set or when typing\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n *\n * @csspart photo - The photo of the avatar.\n * @csspart presence - The presence indicator of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator.\n * @csspart loader - The loading indicator of the avatar.\n */",
           "customElement": true,
           "attributes": [
             {
@@ -3590,19 +3606,19 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.\n\nTo override styles of the avatar inside, use the specified css parts.",
+          "description": "The `mdc-avatarbutton` component is an interactive, clickable version of `mdc-avatar`.\nIt wraps the avatar component in a button, making it focusable and actionable.\n\nThis component extends `buttonsimple` and includes all avatar display features (photo, initials, icon, counter, presence).\nUse 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",
           "name": "AvatarButton",
           "cssProperties": [
             {
-              "description": "Background color of the overlay in rest state",
+              "description": "Background color of the overlay in rest state.",
               "name": "--mdc-avatarbutton-overlay-background-color-rest"
             },
             {
-              "description": "Background color of the overlay in hover state",
+              "description": "Background color of the overlay in hover state.",
               "name": "--mdc-avatarbutton-overlay-background-color-hover"
             },
             {
-              "description": "Background color of the overlay in active state",
+              "description": "Background color of the overlay in active state.",
               "name": "--mdc-avatarbutton-overlay-background-color-active"
             },
             {
@@ -3622,7 +3638,7 @@
               }
             },
             {
-              "description": "Borer color of the button",
+              "description": "Border color of the button",
               "name": "--mdc-button-border-color",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -4079,7 +4095,7 @@
           ],
           "events": [
             {
-              "description": "(React: onClick) This event is dispatched when the avatarbutton is clicked.",
+              "description": "(React: onClick) Dispatched when the avatar button is clicked.",
               "name": "click",
               "reactName": "onClick",
               "inheritedFrom": {
@@ -4088,7 +4104,7 @@
               }
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.",
+              "description": "(React: onKeyDown) Dispatched when a key is pressed on the avatar button.",
               "name": "keydown",
               "reactName": "onKeyDown",
               "inheritedFrom": {
@@ -4097,7 +4113,7 @@
               }
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.",
+              "description": "(React: onKeyUp) Dispatched when a key is released on the avatar button.",
               "name": "keyup",
               "reactName": "onKeyUp",
               "inheritedFrom": {
@@ -4106,7 +4122,7 @@
               }
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the avatarbutton receives focus.",
+              "description": "(React: onFocus) Dispatched when the avatar button receives focus.",
               "name": "focus",
               "reactName": "onFocus",
               "inheritedFrom": {
@@ -4355,8 +4371,18 @@
             "module": "/src/components/buttonsimple/buttonsimple.component"
           },
           "tagName": "mdc-avatarbutton",
-          "jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * To override styles of the avatar inside, use the specified css parts.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton 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
+          "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,
+          "slots": [
+            {
+              "description": "Text label of the button.",
+              "name": "",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -5082,7 +5108,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
@@ -5094,7 +5120,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"
             }
@@ -5125,7 +5151,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": [
             {
@@ -5185,12 +5211,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.",
@@ -5253,7 +5291,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": {
@@ -5371,7 +5409,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
@@ -5396,7 +5434,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": {
@@ -5410,7 +5448,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": {
@@ -5576,7 +5614,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,
@@ -5659,7 +5697,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": {
@@ -5674,7 +5712,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": {
@@ -5687,7 +5725,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"
             },
@@ -5709,7 +5747,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",
@@ -5721,7 +5759,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",
@@ -5733,7 +5771,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": {
@@ -5746,7 +5784,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": {
@@ -5881,7 +5919,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": [
             {
@@ -5940,7 +5978,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": [
             {
@@ -5976,7 +6014,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
             },
@@ -5986,7 +6024,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
@@ -5997,8 +6035,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
             },
@@ -6008,7 +6046,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
@@ -6020,7 +6058,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"
             },
@@ -6029,7 +6067,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"
             },
@@ -6038,8 +6076,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"
             },
             {
@@ -6048,7 +6086,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"
             }
           ],
@@ -6057,7 +6095,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
         }
       ],
@@ -6217,7 +6255,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": {
@@ -6385,7 +6423,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": {
@@ -6399,7 +6437,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": {
@@ -6596,7 +6634,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": {
@@ -6667,7 +6705,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",
@@ -6679,7 +6717,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",
@@ -6691,7 +6729,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": {
@@ -6704,7 +6742,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": {
@@ -6906,7 +6944,7 @@
               "name": "--mdc-button-background"
             },
             {
-              "description": "Borer color of the button",
+              "description": "Border color of the button",
               "name": "--mdc-button-border-color"
             },
             {
@@ -6914,6 +6952,12 @@
               "name": "--mdc-button-text-color"
             }
           ],
+          "slots": [
+            {
+              "description": "Text label of the button.",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -7313,7 +7357,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
         }
       ],
@@ -7803,7 +7847,7 @@
               }
             },
             {
-              "description": "Borer color of the button",
+              "description": "Border color of the button",
               "name": "--mdc-button-border-color",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -7885,6 +7929,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": [
@@ -11175,7 +11227,7 @@
               }
             },
             {
-              "description": "Borer color of the button",
+              "description": "Border color of the button",
               "name": "--mdc-button-border-color",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -11776,7 +11828,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": [
@@ -16653,7 +16715,7 @@
               }
             },
             {
-              "description": "Borer color of the button",
+              "description": "Border color of the button",
               "name": "--mdc-button-border-color",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -17312,7 +17374,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": [
@@ -21219,7 +21291,7 @@
               }
             },
             {
-              "description": "Borer color of the button",
+              "description": "Border color of the button",
               "name": "--mdc-button-border-color",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -21238,7 +21310,11 @@
           "slots": [
             {
               "description": "Text label of the linkbutton.",
-              "name": ""
+              "name": "",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             }
           ],
           "members": [
@@ -45722,7 +45798,7 @@
               }
             },
             {
-              "description": "Borer color of the button",
+              "description": "Border color of the button",
               "name": "--mdc-button-border-color",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -46399,7 +46475,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": [
@@ -54713,7 +54799,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"
             },
@@ -54735,7 +54821,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
             },
@@ -54745,7 +54831,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
             },
@@ -54800,7 +54886,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"
             }
@@ -54811,7 +54897,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"
             },
             {
@@ -54819,7 +54905,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"
             },
             {
@@ -54827,7 +54913,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"
             },
@@ -54836,7 +54922,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"
             }