@momentum-design/components 0.95.5 → 0.95.6

package/dist/custom-elements.json

@@ -9589,518 +9589,449 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/divider/divider.component.js",
+      "path": "components/dialog/dialog.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-divider` is a component that provides a line to separate and organize content.\nIt can also include a button or text positioned centrally, allowing users to interact with the layout.\n\n**Divider Orientation:**\n- **Horizontal**: A thin, horizontal line.\n- **Vertical**: A thin, vertical line.\n\n**Divider Variants:**\n- **solid**: Solid line.\n- **gradient**: Gradient Line.\n\n**Divider Types:**\n- The type of divider is inferred based on the kind of slot present.\n - **Primary**: A simple horizontal or vertical divider.\n - **Text**: A horizontal divider with a text label in the center.\n - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n\n**Accessibility:**\n- When the slot is replaced by an `mdc-button`:\n  - `aria-label` should be passed to the `mdc-button`.\n  - `aria-expanded` should be passed to the `mdc-button`.\n\n**Notes:**\n- If the slot is replaced by an invalid tag name or contains multiple elements,\n  the divider defaults to the **Primary** type.\n- To override the styles of the divider, use the provided CSS custom properties.",
-          "name": "Divider",
+          "description": "Dialog component is a modal dialog that can be used to display information or prompt the user for input.\nIt can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\nThe dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\nThe dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n\nThe dialog can be controlled solely through the `visible` property, no trigger element is required.\nIf a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\nremember the previously focused element before the dialog was opened.\n\nThe dialog is a controlled component, meaning it does not have its own state management for visibility.\nUse the `visible` property to control the visibility of the dialog.\nUse the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\nor Escape is pressed).\n\nDialog component have 2 variants: default and promotional.\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n- Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n\n**Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n- Use `?visible=true/false` as an attribute instead of `visible=true/false`\n- Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions",
+          "name": "Dialog",
           "cssProperties": [
             {
-              "description": "background color of the divider",
-              "name": "--mdc-divider-background-color"
-            },
-            {
-              "description": "width of the divider",
-              "name": "--mdc-divider-width"
+              "description": "primary background color of the dialog",
+              "name": "--mdc-dialog-primary-background-color"
             },
             {
-              "description": "gradient of the horizontal divider",
-              "name": "--mdc-divider-horizontal-gradient"
+              "description": "border color of the dialog",
+              "name": "--mdc-dialog-border-color"
             },
             {
-              "description": "gradient of the vertical divider",
-              "name": "--mdc-divider-vertical-gradient"
+              "description": "text color of the header/title of the dialog",
+              "name": "--mdc-dialog-header-text-color"
             },
             {
-              "description": "font size of label in the text divider",
-              "name": "--mdc-divider-text-size"
+              "description": "text color of the below header description of the dialog",
+              "name": "--mdc-dialog-description-text-color"
             },
             {
-              "description": "font color of label in the text divider",
-              "name": "--mdc-divider-text-color"
+              "description": "elevation of the dialog",
+              "name": "--mdc-dialog-elevation-3"
             },
             {
-              "description": "left and right margin of label in the text divider",
-              "name": "--mdc-divider-text-margin"
-            },
+              "description": "width of the dialog",
+              "name": "--mdc-dialog-width"
+            }
+          ],
+          "slots": [
             {
-              "description": "line height of label in the text divider",
-              "name": "--mdc-divider-text-line-height"
+              "description": "Slot for the dialog header content. This can be used to pass custom header content.",
+              "name": "header-prefix"
             },
             {
-              "description": "background color of the grabber button in rest state",
-              "name": "--mdc-divider-grabber-button-background-color-normal"
+              "description": "Slot for the dialog body content",
+              "name": "dialog-body"
             },
             {
-              "description": "background color of the grabber button in hover state",
-              "name": "--mdc-divider-grabber-button-background-color-hover"
+              "description": "This slot is for passing `mdc-link` component within the footer section.",
+              "name": "footer-link"
             },
             {
-              "description": "background color of the grabber button in pressed state",
-              "name": "--mdc-divider-grabber-button-background-color-pressed"
+              "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
+              "name": "footer-button-secondary"
             },
             {
-              "description": "border color of the grabber button",
-              "name": "--mdc-divider-grabber-button-border-color"
+              "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
+              "name": "footer-button-primary"
             },
             {
-              "description": "border radius of the grabber button",
-              "name": "--mdc-divider-grabber-button-border-radius"
+              "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred",
+              "name": "footer"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "orientation",
+              "name": "id",
               "type": {
-                "text": "DividerOrientation"
+                "text": "string"
               },
-              "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
-              "default": "horizontal",
-              "attribute": "orientation",
+              "default": "''",
+              "description": "The unique ID of the dialog",
+              "attribute": "id",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "triggerId",
               "type": {
-                "text": "DividerVariant"
+                "text": "string | undefined"
               },
-              "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
-              "default": "solid",
-              "attribute": "variant",
+              "description": "The ID of the element that triggers the dialog",
+              "default": "undefined",
+              "attribute": "triggerId",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "arrowDirection",
+              "name": "visible",
               "type": {
-                "text": "Directions"
+                "text": "boolean"
               },
-              "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
-              "default": "'negative'",
-              "attribute": "arrow-direction",
+              "description": "The visibility of the dialog\n\nDialog is a controlled component, visible is the only property that controls the visibility of the dialog.",
+              "default": "false",
+              "attribute": "visible",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "buttonPosition",
+              "name": "zIndex",
               "type": {
-                "text": "Directions"
+                "text": "number"
               },
-              "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
-              "default": "'negative'",
-              "attribute": "button-position",
+              "description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
+              "default": "1000",
+              "attribute": "z-index",
               "reflects": true
             },
             {
-              "kind": "method",
-              "name": "setVariant",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "variant",
-                  "type": {
-                    "text": "DividerVariant"
-                  },
-                  "description": "The variant to set."
-                }
-              ],
-              "description": "Sets the variant attribute for the divider component.\nIf the provided variant is not included in the DIVIDER_VARIANT,\nit defaults to the value specified in DEFAULTS.VARIANT."
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "DialogSize"
+              },
+              "description": "The size of the dialog, can be 'small' (432px width), 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).",
+              "default": "small",
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "setOrientation",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "orientation",
-                  "type": {
-                    "text": "DividerOrientation"
-                  },
-                  "description": "The orientation to set."
-                }
-              ],
-              "description": "Sets the orientation attribute for the divider component.\nIf the provided orientation is not included in the DIVIDER_ORIENTATION,\nit defaults to the value specified in DEFAULTS.ORIENTATION."
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "DialogVariant"
+              },
+              "description": "The variant of the dialog, can be 'default' or 'promotional'",
+              "default": "default",
+              "attribute": "variant",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "ensureValidDirections",
-              "privacy": "private",
-              "description": "Sets the buttonPosition and arrowDirection attribute for the divider component.\nIf the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,\nit defaults to the value specified in DIRECTIONS based on the ORIENTATION.",
-              "parameters": [
-                {
-                  "description": "The buttonPosition to set.",
-                  "name": "buttonPosition"
-                },
-                {
-                  "description": "The arrowDirection to set.",
-                  "name": "arrowDirection"
-                }
-              ]
+              "kind": "field",
+              "name": "closeButtonAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value for the aria-label attribute for close button accessibility",
+              "attribute": "close-button-aria-label"
             },
             {
-              "kind": "method",
-              "name": "setGrabberButton",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
               },
-              "description": "Configures the grabber button within the divider.\n\n- Sets the `prefix-icon` attribute for the grabber button based\non the `arrow-direction` and `orientation` properties.\n\nThis method updates the DOM element dynamically if a grabber button is present."
+              "default": "null",
+              "description": "Defines a string value for the aria-label attribute when header is not used",
+              "attribute": "aria-label",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "getArrowIcon",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "ariaLabelledby",
+              "type": {
+                "text": "string | null"
               },
-              "description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
+              "default": "null",
+              "description": "Defines a string value for the aria-labelledby attribute that refers to the element\nlabeling the dialog for accessibility",
+              "attribute": "aria-labelledby",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "inferDividerType",
-              "privacy": "private",
-              "description": "Infers the type of divider based on the kind of slot present.",
-              "parameters": [
-                {
-                  "description": "default slot of divider",
-                  "name": "slot"
-                }
-              ]
-            }
-          ],
-          "attributes": [
-            {
-              "name": "orientation",
+              "kind": "field",
+              "name": "ariaDescribedBy",
               "type": {
-                "text": "DividerOrientation"
+                "text": "string | null"
               },
-              "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
-              "default": "horizontal",
-              "fieldName": "orientation"
+              "default": "null",
+              "description": "Defines a string value for the aria-describedby attribute that refers to the element\ndescribing the dialog for accessibility",
+              "attribute": "aria-describedby",
+              "reflects": true
             },
             {
-              "name": "variant",
+              "kind": "field",
+              "name": "ariaDescription",
               "type": {
-                "text": "DividerVariant"
+                "text": "string | null"
               },
-              "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
-              "default": "solid",
-              "fieldName": "variant"
+              "default": "null",
+              "description": "Defines a string value for the aria-description attribute that refers to the element\ndescribing the dialog for accessibility",
+              "attribute": "aria-description",
+              "reflects": true
             },
             {
-              "name": "arrow-direction",
+              "kind": "field",
+              "name": "headerText",
               "type": {
-                "text": "Directions"
+                "text": "string | undefined"
               },
-              "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
-              "default": "'negative'",
-              "fieldName": "arrowDirection"
+              "description": "Defines a string value to display as the title of the dialog",
+              "attribute": "header-text",
+              "reflects": true
             },
             {
-              "name": "button-position",
+              "kind": "field",
+              "name": "descriptionText",
               "type": {
-                "text": "Directions"
+                "text": "string | undefined"
               },
-              "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
-              "default": "'negative'",
-              "fieldName": "buttonPosition"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-divider",
-          "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n *  - **Primary**: A simple horizontal or vertical divider.\n *  - **Text**: A horizontal divider with a text label in the center.\n *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n *   - `aria-label` should be passed to the `mdc-button`.\n *   - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n *   the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button\n *  in rest state\n * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button\n *  in hover state\n * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button\n *  in pressed state\n * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Divider",
-            "module": "components/divider/divider.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/filterchip/filterchip.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "mdc-filterchip component is an interactive chip that consumers can use to select or deselect.\nThey can be found with lists or tables as quick filters.\n\nThis component is built on top of the mdc-chip component.",
-          "name": "FilterChip",
-          "members": [
+              "description": "Defines a string value to display as the under-header description of the dialog",
+              "attribute": "description-text",
+              "reflects": true
+            },
             {
               "kind": "field",
-              "name": "selected",
+              "name": "headerTagName",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "The selected state of the filterchip.",
-              "attribute": "selected",
+              "description": "The html tag to be used for the header text",
+              "attribute": "header-tag-name",
               "reflects": true
             },
             {
-              "kind": "method",
-              "name": "setSelected",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "selected",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The selected state of the filterchip."
-                }
-              ],
-              "description": "Sets the selected state of the filterchip along with the icon.\naria-pressed attribute is also set to true or false."
-            },
-            {
-              "kind": "method",
-              "name": "executeAction",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+              "kind": "field",
+              "name": "descriptionTagName",
+              "type": {
+                "text": "string"
               },
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "description": "The html tag to be used for the below-header description text",
+              "attribute": "description-tag-name",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "iconName",
+              "name": "role",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "DialogRole"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
-              }
+              "description": "Role of the dialog",
+              "default": "dialog",
+              "attribute": "role",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "color",
+              "name": "disableAriaHasPopup",
               "type": {
-                "text": "ColorType"
+                "text": "boolean"
               },
-              "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
-              "default": "default",
-              "attribute": "color",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Chip",
-                "module": "components/chip/chip.component.js"
-              }
+              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
+              "default": "false",
+              "attribute": "disable-aria-haspopup",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "focusTrap",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
-              "attribute": "label",
+              "privacy": "protected",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nNOTE: this should only be disabled in rare cases! By default a Modal Dialog\nshould trap focus always.",
+              "default": "true",
+              "attribute": "focus-trap",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Chip",
-                "module": "components/chip/chip.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderIcon",
+              "name": "closeDialog",
               "privacy": "private",
-              "description": "Renders the icon element if available.",
-              "return": {
-                "type": {
-                  "text": ""
+              "description": "Fired when Close Button is clicked or Escape key is pressed.\nThis method dispatches the close event. Setting visible to false\nhas to be done by the consumer of the component."
+            },
+            {
+              "kind": "method",
+              "name": "isOpenUpdated",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "oldValue",
+                  "type": {
+                    "text": "boolean | undefined"
+                  },
+                  "description": "The old value of the visible property."
+                },
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The new value of the visible property."
                 }
-              },
-              "inheritedFrom": {
-                "name": "Chip",
-                "module": "components/chip/chip.component.js"
-              }
+              ],
+              "description": "Handles the dialog visibility change.\nHandles the exit event to close the dialog."
             },
             {
               "kind": "field",
-              "name": "autofocus",
+              "name": "preventScroll",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
-              "attribute": "autofocus",
-              "reflects": true,
+              "privacy": "protected",
+              "description": "Prevent outside scrolling when element is shown.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "PreventScrollMixin",
+                "module": "utils/mixins/PreventScrollMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
-              "reflects": true,
+              "kind": "method",
+              "name": "activatePreventScroll",
+              "privacy": "protected",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "PreventScrollMixin",
+                "module": "utils/mixins/PreventScrollMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
+              "kind": "method",
+              "name": "deactivatePreventScroll",
+              "privacy": "protected",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "PreventScrollMixin",
+                "module": "utils/mixins/PreventScrollMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "shouldFocusTrapWrap",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
-              "default": "undefined",
-              "attribute": "active",
+              "default": "true",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
+              "attribute": "should-focus-trap-wrap",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "softDisabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "attribute": "soft-disabled",
-              "reflects": true,
+              "kind": "method",
+              "name": "setIsFocusTrapActivated",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "isActivated",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "ButtonSize"
-              },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
-              "attribute": "size",
-              "reflects": true,
+              "kind": "method",
+              "name": "activateFocusTrap",
+              "privacy": "public",
+              "description": "Activate the focus trap",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "role",
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "attribute": "role",
-              "reflects": true,
+              "kind": "method",
+              "name": "deactivateFocusTrap",
+              "privacy": "public",
+              "description": "Deactivate the focus trap.",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "ariaStateKey",
-              "type": {
-                "text": "string | undefined"
+              "kind": "method",
+              "name": "hasNoClientRects",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element has no client rectangles (not visible in the viewport).",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "attribute": "ariaStateKey",
-              "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "ButtonType"
+              "kind": "method",
+              "name": "hasZeroDimensions",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element has zero dimensions (width and height are both 0).",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "button",
-              "attribute": "type",
-              "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "setActive",
-              "privacy": "protected",
+              "name": "isNotVisible",
+              "privacy": "private",
               "parameters": [
                 {
                   "name": "element",
                   "type": {
                     "text": "HTMLElement"
                   },
-                  "description": "The button element"
-                },
-                {
-                  "name": "active",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The active state of the element"
+                  "description": "The element to check."
                 }
               ],
-              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
+              "description": "Determines if the element is not visible in the DOM.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "setSoftDisabled",
+              "name": "hasHiddenStyle",
               "privacy": "private",
               "parameters": [
                 {
@@ -10108,26 +10039,23 @@
                   "type": {
                     "text": "HTMLElement"
                   },
-                  "description": "The button element."
-                },
-                {
-                  "name": "softDisabled",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The soft-disabled state."
+                  "description": "The element to check."
                 }
               ],
-              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
+              "description": "Checks if the element has inline styles that make it hidden.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "setDisabled",
+              "name": "hasComputedHidden",
               "privacy": "private",
               "parameters": [
                 {
@@ -10135,1125 +10063,1199 @@
                   "type": {
                     "text": "HTMLElement"
                   },
-                  "description": "The button element."
-                },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element is hidden by a computed style.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "isHidden",
+              "privacy": "private",
+              "parameters": [
                 {
-                  "name": "disabled",
+                  "name": "element",
                   "type": {
-                    "text": "boolean"
+                    "text": "HTMLElement"
                   },
-                  "description": "The disabled state."
+                  "description": "The element to check."
                 }
               ],
-              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
+              "description": "Checks if the element is hidden from the user.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "triggerClickEvent",
+              "name": "isDisabled",
               "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "any"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element is disabled.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "handleBlur",
+              "name": "isNotTabbable",
               "privacy": "private",
-              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element is not tabbable.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
+              "name": "isInteractiveElement",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "element",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "HTMLElement"
                   },
-                  "description": "The keyboard event."
+                  "description": "The element to check."
                 }
               ],
-              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
+              "description": "Checks if the element is interactive.",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "handleKeyUp",
+              "name": "isFocusable",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "element",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "HTMLElement"
                   },
-                  "description": "The keyboard event."
+                  "description": "The element to check."
                 }
               ],
-              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
+              "description": "Checks if the element is focusable.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "selected",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The selected state of the filterchip.",
-              "fieldName": "selected"
             },
             {
-              "name": "icon-name",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
-              }
-            },
-            {
-              "name": "color",
-              "type": {
-                "text": "ColorType"
-              },
-              "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
-              "default": "default",
-              "fieldName": "color",
-              "inheritedFrom": {
-                "name": "Chip",
-                "module": "src/components/chip/chip.component.ts"
-              }
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
+              "kind": "method",
+              "name": "findFocusable",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "default": "''",
-              "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
-              "fieldName": "label",
+              "parameters": [
+                {
+                  "name": "root",
+                  "type": {
+                    "text": "ShadowRoot | HTMLElement"
+                  },
+                  "description": "The root element to search for focusable elements."
+                },
+                {
+                  "name": "matches",
+                  "default": "new Set()",
+                  "type": {
+                    "text": "Set<HTMLElement>"
+                  },
+                  "description": "The set of focusable elements."
+                }
+              ],
+              "description": "Recursively finds all focusable elements within the given root and its descendants.\n\nMake sure this is performant, as it will be called multiple times.",
               "inheritedFrom": {
-                "name": "Chip",
-                "module": "src/components/chip/chip.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
-              "fieldName": "autofocus",
+              "kind": "method",
+              "name": "setFocusableElements",
+              "privacy": "private",
+              "description": "Updates the list of focusable elements within the component's shadow root.",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
+              "kind": "method",
+              "name": "setInitialFocus",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "elementIndexToReceiveFocus",
+                  "default": "0",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the preferable element to focus."
+                }
+              ],
+              "description": "Sets the initial focus within the container.",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
+              "kind": "method",
+              "name": "calculateNextIndex",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "currentIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The current index."
+                },
+                {
+                  "name": "step",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The step to calculate the next index."
+                }
+              ],
+              "description": "Calculates the next index for the focus trap.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "active",
-              "type": {
-                "text": "boolean | undefined"
+              "kind": "method",
+              "name": "getDeepActiveElement",
+              "privacy": "private",
+              "description": "Returns the deepest active element in the shadow DOM.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
-              "default": "undefined",
-              "fieldName": "active",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "soft-disabled",
-              "type": {
-                "text": "boolean | undefined"
+              "kind": "method",
+              "name": "findElement",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "activeElement",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The active element."
+                }
+              ],
+              "description": "Finds the index of the active element within the focusable elements.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "fieldName": "softDisabled",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "size",
-              "type": {
-                "text": "ButtonSize"
+              "kind": "method",
+              "name": "isEqualFocusNode",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "activeElement",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The active element."
+                },
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to compare."
+                }
+              ],
+              "description": "Checks if the active element is equal to the given element.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
-              "fieldName": "size",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "role",
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "fieldName": "role",
+              "kind": "method",
+              "name": "trapFocus",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                },
+                {
+                  "description": "The direction of the focus trap.\nIf true, the focus will be trapped in the previous element.",
+                  "name": "direction"
+                }
+              ],
+              "description": "Traps focus within the container.",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "ariaStateKey",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "fieldName": "ariaStateKey",
+              "kind": "method",
+              "name": "handleTabKeydown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Traps focus within the container.",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "type",
-              "type": {
-                "text": "ButtonType"
+              "kind": "method",
+              "name": "renderFooter",
+              "privacy": "protected",
+              "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "button",
-              "fieldName": "type",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "Chip",
-            "module": "/src/components/chip/chip.component"
-          },
-          "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 */",
-          "customElement": true,
-          "cssProperties": [
-            {
-              "description": "The color of the chip.",
-              "name": "--mdc-chip-color",
-              "inheritedFrom": {
-                "name": "Chip",
-                "module": "src/components/chip/chip.component.ts"
-              }
-            },
-            {
-              "description": "The border color of the chip.",
-              "name": "--mdc-chip-border-color",
-              "inheritedFrom": {
-                "name": "Chip",
-                "module": "src/components/chip/chip.component.ts"
-              }
-            },
-            {
-              "description": "The background color of the chip.",
-              "name": "--mdc-chip-background-color",
-              "inheritedFrom": {
-                "name": "Chip",
-                "module": "src/components/chip/chip.component.ts"
+                "name": "FooterMixin",
+                "module": "utils/mixins/FooterMixin.js"
               }
             }
           ],
           "events": [
             {
-              "description": "(React: onClick) This event is dispatched when the button is clicked.",
-              "name": "click",
-              "reactName": "onClick",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
-              "name": "keydown",
-              "reactName": "onKeyDown",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
-              "name": "keyup",
-              "reactName": "onKeyUp",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "FilterChip",
-            "module": "components/filterchip/filterchip.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/dialog/dialog.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Dialog component is a modal dialog that can be used to display information or prompt the user for input.\nIt can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\nThe dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\nThe dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n\nThe dialog can be controlled solely through the `visible` property, no trigger element is required.\nIf a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\nremember the previously focused element before the dialog was opened.\n\nThe dialog is a controlled component, meaning it does not have its own state management for visibility.\nUse the `visible` property to control the visibility of the dialog.\nUse the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\nor Escape is pressed).\n\nDialog component have 2 variants: default and promotional.\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n- Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n\n**Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n- Use `?visible=true/false` as an attribute instead of `visible=true/false`\n- Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions",
-          "name": "Dialog",
-          "cssProperties": [
-            {
-              "description": "primary background color of the dialog",
-              "name": "--mdc-dialog-primary-background-color"
-            },
-            {
-              "description": "border color of the dialog",
-              "name": "--mdc-dialog-border-color"
-            },
-            {
-              "description": "text color of the header/title of the dialog",
-              "name": "--mdc-dialog-header-text-color"
-            },
-            {
-              "description": "text color of the below header description of the dialog",
-              "name": "--mdc-dialog-description-text-color"
-            },
-            {
-              "description": "elevation of the dialog",
-              "name": "--mdc-dialog-elevation-3"
-            },
-            {
-              "description": "width of the dialog",
-              "name": "--mdc-dialog-width"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Slot for the dialog header content. This can be used to pass custom header content.",
-              "name": "header-prefix"
-            },
-            {
-              "description": "Slot for the dialog body content",
-              "name": "dialog-body"
+              "description": "(React: onShown) Dispatched when the dialog is shown",
+              "name": "shown",
+              "reactName": "onShown"
             },
             {
-              "description": "This slot is for passing `mdc-link` component within the footer section.",
-              "name": "footer-link"
+              "description": "(React: onHidden) Dispatched when the dialog is hidden",
+              "name": "hidden",
+              "reactName": "onHidden"
             },
             {
-              "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
-              "name": "footer-button-secondary"
+              "description": "(React: onCreated) Dispatched when the dialog is created (added to the DOM)",
+              "name": "created",
+              "reactName": "onCreated"
             },
             {
-              "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
-              "name": "footer-button-primary"
+              "description": "(React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)",
+              "name": "destroyed",
+              "reactName": "onDestroyed"
             },
             {
-              "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred",
-              "name": "footer"
+              "description": "(React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed (this does not hide the dialog)",
+              "name": "close",
+              "reactName": "onClose"
             }
           ],
-          "members": [
+          "attributes": [
             {
-              "kind": "field",
               "name": "id",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The unique ID of the dialog",
-              "attribute": "id",
-              "reflects": true
+              "fieldName": "id"
             },
             {
-              "kind": "field",
               "name": "triggerId",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The ID of the element that triggers the dialog",
               "default": "undefined",
-              "attribute": "triggerId",
-              "reflects": true
+              "fieldName": "triggerId"
             },
             {
-              "kind": "field",
               "name": "visible",
               "type": {
                 "text": "boolean"
               },
               "description": "The visibility of the dialog\n\nDialog is a controlled component, visible is the only property that controls the visibility of the dialog.",
               "default": "false",
-              "attribute": "visible",
-              "reflects": true
+              "fieldName": "visible"
             },
             {
-              "kind": "field",
-              "name": "zIndex",
+              "name": "z-index",
               "type": {
                 "text": "number"
               },
               "description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
               "default": "1000",
-              "attribute": "z-index",
-              "reflects": true
+              "fieldName": "zIndex"
             },
             {
-              "kind": "field",
               "name": "size",
               "type": {
                 "text": "DialogSize"
               },
               "description": "The size of the dialog, can be 'small' (432px width), 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).",
               "default": "small",
-              "attribute": "size",
-              "reflects": true
+              "fieldName": "size"
             },
             {
-              "kind": "field",
               "name": "variant",
               "type": {
                 "text": "DialogVariant"
               },
               "description": "The variant of the dialog, can be 'default' or 'promotional'",
               "default": "default",
-              "attribute": "variant",
-              "reflects": true
+              "fieldName": "variant"
             },
             {
-              "kind": "field",
-              "name": "closeButtonAriaLabel",
+              "name": "close-button-aria-label",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
               "description": "Defines a string value for the aria-label attribute for close button accessibility",
-              "attribute": "close-button-aria-label"
+              "fieldName": "closeButtonAriaLabel"
             },
             {
-              "kind": "field",
-              "name": "ariaLabel",
+              "name": "aria-label",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
               "description": "Defines a string value for the aria-label attribute when header is not used",
-              "attribute": "aria-label",
-              "reflects": true
+              "fieldName": "ariaLabel"
             },
             {
-              "kind": "field",
-              "name": "ariaLabelledby",
+              "name": "aria-labelledby",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
               "description": "Defines a string value for the aria-labelledby attribute that refers to the element\nlabeling the dialog for accessibility",
-              "attribute": "aria-labelledby",
-              "reflects": true
+              "fieldName": "ariaLabelledby"
             },
             {
-              "kind": "field",
-              "name": "ariaDescribedBy",
+              "name": "aria-describedby",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
               "description": "Defines a string value for the aria-describedby attribute that refers to the element\ndescribing the dialog for accessibility",
-              "attribute": "aria-describedby",
-              "reflects": true
+              "fieldName": "ariaDescribedBy"
             },
             {
-              "kind": "field",
-              "name": "ariaDescription",
+              "name": "aria-description",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
               "description": "Defines a string value for the aria-description attribute that refers to the element\ndescribing the dialog for accessibility",
-              "attribute": "aria-description",
-              "reflects": true
+              "fieldName": "ariaDescription"
             },
             {
-              "kind": "field",
-              "name": "headerText",
+              "name": "header-text",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Defines a string value to display as the title of the dialog",
-              "attribute": "header-text",
-              "reflects": true
+              "fieldName": "headerText"
             },
             {
-              "kind": "field",
-              "name": "descriptionText",
+              "name": "description-text",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Defines a string value to display as the under-header description of the dialog",
-              "attribute": "description-text",
-              "reflects": true
+              "fieldName": "descriptionText"
             },
             {
-              "kind": "field",
-              "name": "headerTagName",
+              "name": "header-tag-name",
               "type": {
                 "text": "string"
               },
               "description": "The html tag to be used for the header text",
-              "attribute": "header-tag-name",
-              "reflects": true
+              "fieldName": "headerTagName"
             },
             {
-              "kind": "field",
-              "name": "descriptionTagName",
+              "name": "description-tag-name",
               "type": {
                 "text": "string"
               },
               "description": "The html tag to be used for the below-header description text",
-              "attribute": "description-tag-name",
-              "reflects": true
+              "fieldName": "descriptionTagName"
             },
             {
-              "kind": "field",
               "name": "role",
               "type": {
                 "text": "DialogRole"
               },
               "description": "Role of the dialog",
               "default": "dialog",
-              "attribute": "role",
-              "reflects": true
+              "fieldName": "role"
             },
             {
-              "kind": "field",
-              "name": "disableAriaHasPopup",
+              "name": "disable-aria-haspopup",
               "type": {
                 "text": "boolean"
               },
               "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
               "default": "false",
-              "attribute": "disable-aria-haspopup",
-              "reflects": true
+              "fieldName": "disableAriaHasPopup"
             },
             {
-              "kind": "field",
-              "name": "focusTrap",
+              "name": "focus-trap",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "protected",
               "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nNOTE: this should only be disabled in rare cases! By default a Modal Dialog\nshould trap focus always.",
               "default": "true",
-              "attribute": "focus-trap",
-              "reflects": true,
+              "fieldName": "focusTrap"
+            },
+            {
+              "name": "should-focus-trap-wrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
+              "fieldName": "shouldFocusTrapWrap",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "module": "src/utils/mixins/FocusTrapMixin.ts"
               }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "PreventScrollMixin",
+              "module": "/src/utils/mixins/PreventScrollMixin"
             },
             {
-              "kind": "method",
-              "name": "closeDialog",
-              "privacy": "private",
-              "description": "Fired when Close Button is clicked or Escape key is pressed.\nThis method dispatches the close event. Setting visible to false\nhas to be done by the consumer of the component."
+              "name": "FocusTrapMixin",
+              "module": "/src/utils/mixins/FocusTrapMixin"
             },
             {
-              "kind": "method",
-              "name": "isOpenUpdated",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "oldValue",
-                  "type": {
-                    "text": "boolean | undefined"
-                  },
-                  "description": "The old value of the visible property."
-                },
-                {
-                  "name": "newValue",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The new value of the visible property."
-                }
-              ],
-              "description": "Handles the dialog visibility change.\nHandles the exit event to close the dialog."
+              "name": "FooterMixin",
+              "module": "/src/utils/mixins/FooterMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-dialog",
+          "jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Dialog",
+            "module": "components/dialog/dialog.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/divider/divider.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-divider` is a component that provides a line to separate and organize content.\nIt can also include a button or text positioned centrally, allowing users to interact with the layout.\n\n**Divider Orientation:**\n- **Horizontal**: A thin, horizontal line.\n- **Vertical**: A thin, vertical line.\n\n**Divider Variants:**\n- **solid**: Solid line.\n- **gradient**: Gradient Line.\n\n**Divider Types:**\n- The type of divider is inferred based on the kind of slot present.\n - **Primary**: A simple horizontal or vertical divider.\n - **Text**: A horizontal divider with a text label in the center.\n - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n\n**Accessibility:**\n- When the slot is replaced by an `mdc-button`:\n  - `aria-label` should be passed to the `mdc-button`.\n  - `aria-expanded` should be passed to the `mdc-button`.\n\n**Notes:**\n- If the slot is replaced by an invalid tag name or contains multiple elements,\n  the divider defaults to the **Primary** type.\n- To override the styles of the divider, use the provided CSS custom properties.",
+          "name": "Divider",
+          "cssProperties": [
+            {
+              "description": "background color of the divider",
+              "name": "--mdc-divider-background-color"
+            },
+            {
+              "description": "width of the divider",
+              "name": "--mdc-divider-width"
+            },
+            {
+              "description": "gradient of the horizontal divider",
+              "name": "--mdc-divider-horizontal-gradient"
+            },
+            {
+              "description": "gradient of the vertical divider",
+              "name": "--mdc-divider-vertical-gradient"
+            },
+            {
+              "description": "font size of label in the text divider",
+              "name": "--mdc-divider-text-size"
+            },
+            {
+              "description": "font color of label in the text divider",
+              "name": "--mdc-divider-text-color"
+            },
+            {
+              "description": "left and right margin of label in the text divider",
+              "name": "--mdc-divider-text-margin"
+            },
+            {
+              "description": "line height of label in the text divider",
+              "name": "--mdc-divider-text-line-height"
+            },
+            {
+              "description": "background color of the grabber button in rest state",
+              "name": "--mdc-divider-grabber-button-background-color-normal"
+            },
+            {
+              "description": "background color of the grabber button in hover state",
+              "name": "--mdc-divider-grabber-button-background-color-hover"
+            },
+            {
+              "description": "background color of the grabber button in pressed state",
+              "name": "--mdc-divider-grabber-button-background-color-pressed"
+            },
+            {
+              "description": "border color of the grabber button",
+              "name": "--mdc-divider-grabber-button-border-color"
             },
+            {
+              "description": "border radius of the grabber button",
+              "name": "--mdc-divider-grabber-button-border-radius"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "preventScroll",
+              "name": "orientation",
               "type": {
-                "text": "boolean"
+                "text": "DividerOrientation"
               },
-              "privacy": "protected",
-              "description": "Prevent outside scrolling when element is shown.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
-              "inheritedFrom": {
-                "name": "PreventScrollMixin",
-                "module": "utils/mixins/PreventScrollMixin.js"
-              }
+              "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
+              "default": "horizontal",
+              "attribute": "orientation",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "activatePreventScroll",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "PreventScrollMixin",
-                "module": "utils/mixins/PreventScrollMixin.js"
-              }
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "DividerVariant"
+              },
+              "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
+              "default": "solid",
+              "attribute": "variant",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "deactivatePreventScroll",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "PreventScrollMixin",
-                "module": "utils/mixins/PreventScrollMixin.js"
-              }
+              "kind": "field",
+              "name": "arrowDirection",
+              "type": {
+                "text": "Directions"
+              },
+              "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
+              "default": "'negative'",
+              "attribute": "arrow-direction",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "shouldFocusTrapWrap",
+              "name": "buttonPosition",
               "type": {
-                "text": "boolean"
+                "text": "Directions"
               },
-              "default": "true",
-              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
-              "attribute": "should-focus-trap-wrap",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
-              }
+              "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
+              "default": "'negative'",
+              "attribute": "button-position",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "setIsFocusTrapActivated",
+              "name": "setVariant",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "isActivated",
+                  "name": "variant",
                   "type": {
-                    "text": "boolean"
-                  }
+                    "text": "DividerVariant"
+                  },
+                  "description": "The variant to set."
                 }
               ],
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
-              }
+              "description": "Sets the variant attribute for the divider component.\nIf the provided variant is not included in the DIVIDER_VARIANT,\nit defaults to the value specified in DEFAULTS.VARIANT."
             },
             {
               "kind": "method",
-              "name": "activateFocusTrap",
-              "privacy": "public",
-              "description": "Activate the focus trap",
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
-              }
+              "name": "setOrientation",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "orientation",
+                  "type": {
+                    "text": "DividerOrientation"
+                  },
+                  "description": "The orientation to set."
+                }
+              ],
+              "description": "Sets the orientation attribute for the divider component.\nIf the provided orientation is not included in the DIVIDER_ORIENTATION,\nit defaults to the value specified in DEFAULTS.ORIENTATION."
             },
             {
               "kind": "method",
-              "name": "deactivateFocusTrap",
-              "privacy": "public",
-              "description": "Deactivate the focus trap.",
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
-              }
+              "name": "ensureValidDirections",
+              "privacy": "private",
+              "description": "Sets the buttonPosition and arrowDirection attribute for the divider component.\nIf the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,\nit defaults to the value specified in DIRECTIONS based on the ORIENTATION.",
+              "parameters": [
+                {
+                  "description": "The buttonPosition to set.",
+                  "name": "buttonPosition"
+                },
+                {
+                  "description": "The arrowDirection to set.",
+                  "name": "arrowDirection"
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "hasNoClientRects",
+              "name": "setGrabberButton",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
+              "return": {
+                "type": {
+                  "text": "void"
                 }
-              ],
-              "description": "Checks if the element has no client rectangles (not visible in the viewport).",
+              },
+              "description": "Configures the grabber button within the divider.\n\n- Sets the `prefix-icon` attribute for the grabber button based\non the `arrow-direction` and `orientation` properties.\n\nThis method updates the DOM element dynamically if a grabber button is present."
+            },
+            {
+              "kind": "method",
+              "name": "getArrowIcon",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
-              }
+              "description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
             },
             {
               "kind": "method",
-              "name": "hasZeroDimensions",
+              "name": "inferDividerType",
               "privacy": "private",
+              "description": "Infers the type of divider based on the kind of slot present.",
               "parameters": [
                 {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element has zero dimensions (width and height are both 0).",
-              "return": {
-                "type": {
-                  "text": ""
+                  "description": "default slot of divider",
+                  "name": "slot"
                 }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "orientation",
+              "type": {
+                "text": "DividerOrientation"
               },
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
-              }
+              "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
+              "default": "horizontal",
+              "fieldName": "orientation"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "DividerVariant"
+              },
+              "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
+              "default": "solid",
+              "fieldName": "variant"
+            },
+            {
+              "name": "arrow-direction",
+              "type": {
+                "text": "Directions"
+              },
+              "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
+              "default": "'negative'",
+              "fieldName": "arrowDirection"
+            },
+            {
+              "name": "button-position",
+              "type": {
+                "text": "Directions"
+              },
+              "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
+              "default": "'negative'",
+              "fieldName": "buttonPosition"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-divider",
+          "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n *  - **Primary**: A simple horizontal or vertical divider.\n *  - **Text**: A horizontal divider with a text label in the center.\n *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n *   - `aria-label` should be passed to the `mdc-button`.\n *   - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n *   the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button\n *  in rest state\n * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button\n *  in hover state\n * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button\n *  in pressed state\n * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Divider",
+            "module": "components/divider/divider.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/filterchip/filterchip.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-filterchip component is an interactive chip that consumers can use to select or deselect.\nThey can be found with lists or tables as quick filters.\n\nThis component is built on top of the mdc-chip component.",
+          "name": "FilterChip",
+          "members": [
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The selected state of the filterchip.",
+              "attribute": "selected",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "isNotVisible",
+              "name": "setSelected",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "element",
+                  "name": "selected",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "boolean"
                   },
-                  "description": "The element to check."
+                  "description": "The selected state of the filterchip."
                 }
               ],
-              "description": "Determines if the element is not visible in the DOM.",
+              "description": "Sets the selected state of the filterchip along with the icon.\naria-pressed attribute is also set to true or false."
+            },
+            {
+              "kind": "method",
+              "name": "executeAction",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              },
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "iconName",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
+              "inheritedFrom": {
+                "name": "IconNameMixin",
+                "module": "utils/mixins/IconNameMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "ColorType"
               },
+              "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
+              "default": "default",
+              "attribute": "color",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Chip",
+                "module": "components/chip/chip.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "hasHiddenStyle",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element has inline styles that make it hidden.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
               },
+              "default": "''",
+              "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
+              "attribute": "label",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Chip",
+                "module": "components/chip/chip.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "hasComputedHidden",
+              "name": "renderIcon",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element is hidden by a computed style.",
+              "description": "Renders the icon element if available.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Chip",
+                "module": "components/chip/chip.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "isHidden",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element is hidden from the user.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
               },
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
+              "attribute": "autofocus",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "isDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "any"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element is disabled.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
               },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "isNotTabbable",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element is not tabbable.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
               },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "isInteractiveElement",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean | undefined"
               },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element is interactive.",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
+              "attribute": "active",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "isFocusable",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element is focusable.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "softDisabled",
+              "type": {
+                "text": "boolean | undefined"
               },
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "attribute": "soft-disabled",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "findFocusable",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "ButtonSize"
               },
-              "parameters": [
-                {
-                  "name": "root",
-                  "type": {
-                    "text": "ShadowRoot | HTMLElement"
-                  },
-                  "description": "The root element to search for focusable elements."
-                },
-                {
-                  "name": "matches",
-                  "default": "new Set()",
-                  "type": {
-                    "text": "Set<HTMLElement>"
-                  },
-                  "description": "The set of focusable elements."
-                }
-              ],
-              "description": "Recursively finds all focusable elements within the given root and its descendants.\n\nMake sure this is performant, as it will be called multiple times.",
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "attribute": "size",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "setFocusableElements",
-              "privacy": "private",
-              "description": "Updates the list of focusable elements within the component's shadow root.",
+              "kind": "field",
+              "name": "role",
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "attribute": "role",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed' (when)",
+              "attribute": "ariaStateKey",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "setInitialFocus",
-              "privacy": "public",
-              "parameters": [
-                {
-                  "name": "elementIndexToReceiveFocus",
-                  "default": "0",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the preferable element to focus."
-                }
-              ],
-              "description": "Sets the initial focus within the container.",
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "ButtonType"
+              },
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "attribute": "type",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "calculateNextIndex",
-              "privacy": "private",
+              "name": "setActive",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "currentIndex",
+                  "name": "element",
                   "type": {
-                    "text": "number"
+                    "text": "HTMLElement"
                   },
-                  "description": "The current index."
+                  "description": "The button element"
                 },
                 {
-                  "name": "step",
+                  "name": "active",
+                  "optional": true,
                   "type": {
-                    "text": "number"
+                    "text": "boolean"
                   },
-                  "description": "The step to calculate the next index."
+                  "description": "The active state of the element"
                 }
               ],
-              "description": "Calculates the next index for the focus trap.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getDeepActiveElement",
-              "privacy": "private",
-              "description": "Returns the deepest active element in the shadow DOM.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "findElement",
+              "name": "setSoftDisabled",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "activeElement",
+                  "name": "element",
                   "type": {
                     "text": "HTMLElement"
                   },
-                  "description": "The active element."
+                  "description": "The button element."
+                },
+                {
+                  "name": "softDisabled",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The soft-disabled state."
                 }
               ],
-              "description": "Finds the index of the active element within the focusable elements.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "isEqualFocusNode",
+              "name": "setDisabled",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "activeElement",
+                  "name": "element",
                   "type": {
                     "text": "HTMLElement"
                   },
-                  "description": "The active element."
+                  "description": "The button element."
                 },
                 {
-                  "name": "element",
+                  "name": "disabled",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "boolean"
                   },
-                  "description": "The element to compare."
+                  "description": "The disabled state."
                 }
               ],
-              "description": "Checks if the active element is equal to the given element.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "trapFocus",
+              "name": "triggerClickEvent",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
               "privacy": "private",
               "parameters": [
                 {
                   "name": "event",
                   "type": {
                     "text": "KeyboardEvent"
-                  }
-                },
-                {
-                  "description": "The direction of the focus trap.\nIf true, the focus will be trapped in the previous element.",
-                  "name": "direction"
+                  },
+                  "description": "The keyboard event."
                 }
               ],
-              "description": "Traps focus within the container.",
+              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "handleTabKeydown",
+              "name": "handleKeyUp",
               "privacy": "private",
               "parameters": [
                 {
@@ -11264,249 +11266,247 @@
                   "description": "The keyboard event."
                 }
               ],
-              "description": "Traps focus within the container.",
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderFooter",
-              "privacy": "protected",
-              "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
               "inheritedFrom": {
-                "name": "FooterMixin",
-                "module": "utils/mixins/FooterMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             }
           ],
-          "events": [
-            {
-              "description": "(React: onShown) Dispatched when the dialog is shown",
-              "name": "shown",
-              "reactName": "onShown"
-            },
-            {
-              "description": "(React: onHidden) Dispatched when the dialog is hidden",
-              "name": "hidden",
-              "reactName": "onHidden"
-            },
-            {
-              "description": "(React: onCreated) Dispatched when the dialog is created (added to the DOM)",
-              "name": "created",
-              "reactName": "onCreated"
-            },
-            {
-              "description": "(React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)",
-              "name": "destroyed",
-              "reactName": "onDestroyed"
-            },
-            {
-              "description": "(React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed (this does not hide the dialog)",
-              "name": "close",
-              "reactName": "onClose"
-            }
-          ],
           "attributes": [
             {
-              "name": "id",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The unique ID of the dialog",
-              "fieldName": "id"
-            },
-            {
-              "name": "triggerId",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The ID of the element that triggers the dialog",
-              "default": "undefined",
-              "fieldName": "triggerId"
-            },
-            {
-              "name": "visible",
+              "name": "selected",
               "type": {
                 "text": "boolean"
               },
-              "description": "The visibility of the dialog\n\nDialog is a controlled component, visible is the only property that controls the visibility of the dialog.",
               "default": "false",
-              "fieldName": "visible"
-            },
-            {
-              "name": "z-index",
-              "type": {
-                "text": "number"
-              },
-              "description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
-              "default": "1000",
-              "fieldName": "zIndex"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "DialogSize"
-              },
-              "description": "The size of the dialog, can be 'small' (432px width), 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).",
-              "default": "small",
-              "fieldName": "size"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "DialogVariant"
-              },
-              "description": "The variant of the dialog, can be 'default' or 'promotional'",
-              "default": "default",
-              "fieldName": "variant"
+              "description": "The selected state of the filterchip.",
+              "fieldName": "selected"
             },
             {
-              "name": "close-button-aria-label",
+              "name": "icon-name",
               "type": {
-                "text": "string | null"
+                "text": "IconNames | undefined"
               },
-              "default": "null",
-              "description": "Defines a string value for the aria-label attribute for close button accessibility",
-              "fieldName": "closeButtonAriaLabel"
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
+              "inheritedFrom": {
+                "name": "IconNameMixin",
+                "module": "src/utils/mixins/IconNameMixin.ts"
+              }
             },
             {
-              "name": "aria-label",
+              "name": "color",
               "type": {
-                "text": "string | null"
+                "text": "ColorType"
               },
-              "default": "null",
-              "description": "Defines a string value for the aria-label attribute when header is not used",
-              "fieldName": "ariaLabel"
+              "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
+              "default": "default",
+              "fieldName": "color",
+              "inheritedFrom": {
+                "name": "Chip",
+                "module": "src/components/chip/chip.component.ts"
+              }
             },
             {
-              "name": "aria-labelledby",
+              "name": "label",
               "type": {
-                "text": "string | null"
+                "text": "string"
               },
-              "default": "null",
-              "description": "Defines a string value for the aria-labelledby attribute that refers to the element\nlabeling the dialog for accessibility",
-              "fieldName": "ariaLabelledby"
+              "default": "''",
+              "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "Chip",
+                "module": "src/components/chip/chip.component.ts"
+              }
             },
             {
-              "name": "aria-describedby",
+              "name": "autofocus",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "Defines a string value for the aria-describedby attribute that refers to the element\ndescribing the dialog for accessibility",
-              "fieldName": "ariaDescribedBy"
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
+              "fieldName": "autofocus",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "name": "aria-description",
+              "name": "tabIndex",
               "type": {
-                "text": "string | null"
+                "text": "number"
               },
-              "default": "null",
-              "description": "Defines a string value for the aria-description attribute that refers to the element\ndescribing the dialog for accessibility",
-              "fieldName": "ariaDescription"
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "name": "header-text",
+              "name": "disabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "Defines a string value to display as the title of the dialog",
-              "fieldName": "headerText"
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "name": "description-text",
+              "name": "active",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "Defines a string value to display as the under-header description of the dialog",
-              "fieldName": "descriptionText"
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
+              "fieldName": "active",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "name": "header-tag-name",
+              "name": "soft-disabled",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "description": "The html tag to be used for the header text",
-              "fieldName": "headerTagName"
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "fieldName": "softDisabled",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "name": "description-tag-name",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "ButtonSize"
               },
-              "description": "The html tag to be used for the below-header description text",
-              "fieldName": "descriptionTagName"
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
               "name": "role",
-              "type": {
-                "text": "DialogRole"
-              },
-              "description": "Role of the dialog",
-              "default": "dialog",
-              "fieldName": "role"
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "fieldName": "role",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "name": "disable-aria-haspopup",
+              "name": "ariaStateKey",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
-              "default": "false",
-              "fieldName": "disableAriaHasPopup"
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed' (when)",
+              "fieldName": "ariaStateKey",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "name": "focus-trap",
+              "name": "type",
               "type": {
-                "text": "boolean"
+                "text": "ButtonType"
               },
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nNOTE: this should only be disabled in rare cases! By default a Modal Dialog\nshould trap focus always.",
-              "default": "true",
-              "fieldName": "focusTrap"
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "fieldName": "type",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "Chip",
+            "module": "/src/components/chip/chip.component"
+          },
+          "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 */",
+          "customElement": true,
+          "cssProperties": [
+            {
+              "description": "The color of the chip.",
+              "name": "--mdc-chip-color",
+              "inheritedFrom": {
+                "name": "Chip",
+                "module": "src/components/chip/chip.component.ts"
+              }
             },
             {
-              "name": "should-focus-trap-wrap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
-              "fieldName": "shouldFocusTrapWrap",
+              "description": "The border color of the chip.",
+              "name": "--mdc-chip-border-color",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "src/utils/mixins/FocusTrapMixin.ts"
+                "name": "Chip",
+                "module": "src/components/chip/chip.component.ts"
+              }
+            },
+            {
+              "description": "The background color of the chip.",
+              "name": "--mdc-chip-background-color",
+              "inheritedFrom": {
+                "name": "Chip",
+                "module": "src/components/chip/chip.component.ts"
               }
             }
           ],
-          "mixins": [
+          "events": [
             {
-              "name": "PreventScrollMixin",
-              "module": "/src/utils/mixins/PreventScrollMixin"
+              "description": "(React: onClick) This event is dispatched when the button is clicked.",
+              "name": "click",
+              "reactName": "onClick",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "name": "FocusTrapMixin",
-              "module": "/src/utils/mixins/FocusTrapMixin"
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "name": "FooterMixin",
-              "module": "/src/utils/mixins/FooterMixin"
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-dialog",
-          "jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
@@ -11514,8 +11514,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Dialog",
-            "module": "components/dialog/dialog.component.js"
+            "name": "FilterChip",
+            "module": "components/filterchip/filterchip.component.js"
           }
         }
       ]
@@ -33284,14 +33284,6 @@
             {
               "description": "Option to override the color of the scrollbar thumb.",
               "name": "--mdc-themeprovider-scrollbar-thumb-color"
-            },
-            {
-              "description": "Option to override the color of the scrollbar thumb on hover. Applicable only on webkit browsers.",
-              "name": "--mdc-themeprovider-scrollbar-thumb-hover-color"
-            },
-            {
-              "description": "Option to override the color of the scrollbar thumb on press. Applicable only on webkit browsers.",
-              "name": "--mdc-themeprovider-scrollbar-thumb-active-color"
             }
           ],
           "slots": [
@@ -33351,7 +33343,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-themeprovider",
-          "jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Available Momentum theme classes:\n *\n * `mds-theme-stable-darkWebex`, `mds-theme-stable-lightWebex`\n *\n * `mds-theme-stable-darkBronzeWebex`, `mds-theme-stable-lightBronzeWebex`\n *\n * `mds-theme-stable-darkIndigoWebex`, `mds-theme-stable-lightIndigoWebex`\n *\n * `mds-theme-stable-darkJadeWebex`, `mds-theme-stable-lightJadeWebex`\n *\n * `mds-theme-stable-darkLavenderWebex`, `mds-theme-stable-lightLavenderWebex`\n *\n * `mds-theme-stable-darkRoseWebex`, `mds-theme-stable-lightRoseWebex`\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,\n * default: `-0.25px` (this is to match the old CiscoSans)\n * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,\n * default: `\"ss02\" on`\n * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the\n * scrollbar thumb on hover. Applicable only on webkit browsers.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-active-color - Option to override the color of the\n * scrollbar thumb on press. Applicable only on webkit browsers.\n */",
+          "jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Available Momentum theme classes:\n *\n * `mds-theme-stable-darkWebex`, `mds-theme-stable-lightWebex`\n *\n * `mds-theme-stable-darkBronzeWebex`, `mds-theme-stable-lightBronzeWebex`\n *\n * `mds-theme-stable-darkIndigoWebex`, `mds-theme-stable-lightIndigoWebex`\n *\n * `mds-theme-stable-darkJadeWebex`, `mds-theme-stable-lightJadeWebex`\n *\n * `mds-theme-stable-darkLavenderWebex`, `mds-theme-stable-lightLavenderWebex`\n *\n * `mds-theme-stable-darkRoseWebex`, `mds-theme-stable-lightRoseWebex`\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,\n * default: `-0.25px` (this is to match the old CiscoSans)\n * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,\n * default: `\"ss02\" on`\n * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.\n */",
           "customElement": true
         }
       ],