@momentum-design/components 0.80.5 → 0.81.1

package/dist/custom-elements.json

@@ -7842,13 +7842,30 @@
             },
             {
               "kind": "field",
-              "name": "enabledFocusTrap",
+              "name": "focusTrap",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
               "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "attribute": "enabledFocusTrap",
+              "default": "false",
+              "attribute": "focus-trap",
+              "reflects": true,
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "shouldFocusTrapWrap",
+              "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 `enabledFocusTrap` is true.",
+              "attribute": "should-focus-trap-wrap",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "utils/mixins/FocusTrapMixin.js"
@@ -7869,11 +7886,10 @@
               }
             },
             {
-              "kind": "field",
-              "name": "shouldWrapFocus",
-              "type": {
-                "text": "() => boolean"
-              },
+              "kind": "method",
+              "name": "activateFocusTrap",
+              "privacy": "public",
+              "description": "Activate the focus trap\nThis calculates the focusable elements within the component's shadow root",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "utils/mixins/FocusTrapMixin.js"
@@ -8153,7 +8169,7 @@
               "privacy": "public",
               "parameters": [
                 {
-                  "name": "prefferableElement",
+                  "name": "elementIndexToReceiveFocus",
                   "default": "0",
                   "type": {
                     "text": "number"
@@ -8289,7 +8305,7 @@
             },
             {
               "kind": "method",
-              "name": "handleKeydown",
+              "name": "handleTabKeydown",
               "privacy": "private",
               "parameters": [
                 {
@@ -8396,21 +8412,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "focusTrap",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "default": "false",
-              "attribute": "focus-trap",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "preventScroll",
@@ -8651,6 +8652,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "disableAriaHasPopup",
+              "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,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "arrowElement",
@@ -8943,13 +8959,13 @@
               }
             },
             {
-              "name": "enabledFocusTrap",
+              "name": "should-focus-trap-wrap",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "fieldName": "enabledFocusTrap",
+              "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 `enabledFocusTrap` is true.",
+              "fieldName": "shouldFocusTrapWrap",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "src/utils/mixins/FocusTrapMixin.ts"
@@ -9266,6 +9282,19 @@
                 "name": "Popover",
                 "module": "src/components/popover/popover.component.ts"
               }
+            },
+            {
+              "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",
+              "fieldName": "disableAriaHasPopup",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             }
           ],
           "superclass": {
@@ -9421,6 +9450,17 @@
               "description": "Defines a string value for the aria-label attribute for close button accessibility",
               "attribute": "close-button-aria-label"
             },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "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
+            },
             {
               "kind": "field",
               "name": "ariaLabelledby",
@@ -9434,13 +9474,24 @@
             },
             {
               "kind": "field",
-              "name": "ariaLabel",
+              "name": "ariaDescribedBy",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
-              "description": "Defines a string value for the aria-label attribute when header is not used",
-              "attribute": "aria-label",
+              "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
+            },
+            {
+              "kind": "field",
+              "name": "ariaDescription",
+              "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
             },
             {
@@ -9495,16 +9546,15 @@
               "reflects": true
             },
             {
-              "kind": "method",
-              "name": "setupTriggerListener",
-              "privacy": "private",
-              "description": "Sets up the trigger listener for focus trap"
-            },
-            {
-              "kind": "method",
-              "name": "removeEventListeners",
-              "privacy": "private",
-              "description": "Removes the trigger event listener"
+              "kind": "field",
+              "name": "disableAriaHasPopup",
+              "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
             },
             {
               "kind": "method",
@@ -9529,20 +9579,29 @@
               "description": "Handles the dialog visibility change.\nHandles the exit event to close the dialog."
             },
             {
-              "kind": "method",
-              "name": "handleCreateDialogFirstUpdate",
-              "privacy": "private",
-              "description": "Sets the focusable elements inside the dialog."
+              "kind": "field",
+              "name": "focusTrap",
+              "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.",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "enabledFocusTrap",
+              "name": "shouldFocusTrapWrap",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "attribute": "enabledFocusTrap",
+              "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 `enabledFocusTrap` is true.",
+              "attribute": "should-focus-trap-wrap",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "utils/mixins/FocusTrapMixin.js"
@@ -9563,11 +9622,10 @@
               }
             },
             {
-              "kind": "field",
-              "name": "shouldWrapFocus",
-              "type": {
-                "text": "() => boolean"
-              },
+              "kind": "method",
+              "name": "activateFocusTrap",
+              "privacy": "public",
+              "description": "Activate the focus trap\nThis calculates the focusable elements within the component's shadow root",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "utils/mixins/FocusTrapMixin.js"
@@ -9847,7 +9905,7 @@
               "privacy": "public",
               "parameters": [
                 {
-                  "name": "prefferableElement",
+                  "name": "elementIndexToReceiveFocus",
                   "default": "0",
                   "type": {
                     "text": "number"
@@ -9983,7 +10041,7 @@
             },
             {
               "kind": "method",
-              "name": "handleKeydown",
+              "name": "handleTabKeydown",
               "privacy": "private",
               "parameters": [
                 {
@@ -10102,6 +10160,15 @@
               "description": "Defines a string value for the aria-label attribute for close button accessibility",
               "fieldName": "closeButtonAriaLabel"
             },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value for the aria-label attribute when header is not used",
+              "fieldName": "ariaLabel"
+            },
             {
               "name": "aria-labelledby",
               "type": {
@@ -10112,13 +10179,22 @@
               "fieldName": "ariaLabelledby"
             },
             {
-              "name": "aria-label",
+              "name": "aria-describedby",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
-              "description": "Defines a string value for the aria-label attribute when header is not used",
-              "fieldName": "ariaLabel"
+              "description": "Defines a string value for the aria-describedby attribute that refers to the element\ndescribing the dialog for accessibility",
+              "fieldName": "ariaDescribedBy"
+            },
+            {
+              "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",
+              "fieldName": "ariaDescription"
             },
             {
               "name": "header-text",
@@ -10162,13 +10238,22 @@
               "fieldName": "role"
             },
             {
-              "name": "enabledFocusTrap",
+              "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",
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "fieldName": "enabledFocusTrap",
+              "fieldName": "disableAriaHasPopup"
+            },
+            {
+              "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 `enabledFocusTrap` is true.",
+              "fieldName": "shouldFocusTrapWrap",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "src/utils/mixins/FocusTrapMixin.ts"
@@ -11477,128 +11562,111 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/icon/icon.component.js",
+      "path": "components/formfieldwrapper/formfieldwrapper.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n  by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n  the role will be unset.\n\n### Informative Standalone Icons\n- If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\nhave a Tooltip that describes what it means.\n- For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\nand the `role` will be set to \"img\" automatically.\n- **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**",
-          "name": "Icon",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default fill color.",
-              "name": "--mdc-icon-fill-color"
-            },
-            {
-              "description": "Allows customization of the icon size.",
-              "name": "--mdc-icon-size"
-            },
-            {
-              "description": "Allows customization of the icon border radius.",
-              "name": "--mdc-icon-border-radius"
-            }
-          ],
+          "description": "formfieldwrapper is a component that contains the label and helper/validation text\n that can be configured in various ways to suit different use cases (most of the input related components).\nIt is used as an internal component and is not intended to be used directly by consumers.",
+          "name": "FormfieldWrapper",
           "members": [
             {
               "kind": "field",
-              "name": "iconData",
+              "name": "label",
               "type": {
-                "text": "HTMLElement | undefined"
+                "text": "string | undefined"
               },
-              "privacy": "private"
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "attribute": "label",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "lengthUnitFromContext",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "sizeFromContext",
+              "name": "id",
               "type": {
-                "text": "number | undefined"
+                "text": "string"
               },
-              "privacy": "private"
+              "default": "''",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "attribute": "id"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "helpTextType",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "ValidationType"
               },
-              "description": "Name of the icon (= filename)",
-              "attribute": "name",
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "attribute": "help-text-type",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "helpText",
               "type": {
-                "text": "number | undefined"
+                "text": "string | undefined"
               },
-              "description": "Size of the icon (works in combination with length unit)",
-              "attribute": "size"
+              "description": "The help text that is displayed below the input field.",
+              "attribute": "help-text",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "lengthUnit",
+              "name": "toggletipText",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
-              "attribute": "length-unit"
+              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "attribute": "toggletip-text",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "ariaLabel",
+              "name": "toggletipPlacement",
               "type": {
-                "text": "string | null"
+                "text": "PopoverPlacement"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
+              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "default": "'top'",
+              "attribute": "toggletip-placement",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "ariaLabelledBy",
+              "name": "infoIconAriaLabel",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Aria-labelledby attribute to be set for accessibility",
-              "attribute": "aria-labelledby"
+              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
+              "attribute": "info-icon-aria-label",
+              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "iconProviderContext",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "abortController",
-              "type": {
-                "text": "AbortController"
-              },
-              "privacy": "private",
-              "default": "new AbortController()"
+              "kind": "method",
+              "name": "renderLabelElement",
+              "privacy": "protected",
+              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "prepareIconElement",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "iconData",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The icon string to be parsed"
-                }
-              ],
-              "description": "Parse the icon string to an html element, set the attributes and\nreturn the icon element",
+              "name": "renderHelpTextIcon",
+              "privacy": "protected",
+              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
               "return": {
                 "type": {
                   "text": ""
@@ -11607,102 +11675,147 @@
             },
             {
               "kind": "method",
-              "name": "getIconData",
-              "privacy": "private",
-              "description": "Fetches the icon (currently only svg) and sets state and attributes once fetched successfully\n\nThis method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.\nIf the request is aborted after the fetch() call has been fulfilled but before the response body has been read,\nthen attempting to read the response body will reject with an AbortError exception."
-            },
-            {
-              "kind": "method",
-              "name": "handleIconLoadedSuccess",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "iconHtml",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The icon html element which has been fetched from the icon provider."
+              "name": "renderHelpText",
+              "privacy": "protected",
+              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "description": "Sets the iconData state to the fetched icon.\nDispatches a 'load' event on the component once the icon has been successfully loaded."
+              }
             },
             {
               "kind": "method",
-              "name": "handleIconLoadedFailure",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "error",
-                  "type": {
-                    "text": "unknown"
-                  }
+              "name": "renderLabel",
+              "privacy": "protected",
+              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "description": "Dispatches an 'error' event on the component when the icon fetching has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
+              }
             },
             {
               "kind": "method",
-              "name": "updateSize",
-              "privacy": "private",
-              "description": "Updates the size by setting the width and height"
+              "name": "renderHelperText",
+              "privacy": "protected",
+              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
             },
             {
               "kind": "field",
-              "name": "computedIconSize",
-              "privacy": "private",
-              "readonly": true
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
             }
           ],
           "attributes": [
             {
-              "name": "name",
+              "name": "label",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string | undefined"
               },
-              "description": "Name of the icon (= filename)",
-              "fieldName": "name"
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "fieldName": "label"
             },
             {
-              "name": "size",
+              "name": "required",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean"
               },
-              "description": "Size of the icon (works in combination with length unit)",
-              "fieldName": "size"
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required"
             },
             {
-              "name": "length-unit",
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "fieldName": "id"
+            },
+            {
+              "name": "help-text-type",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "fieldName": "helpTextType"
+            },
+            {
+              "name": "help-text",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
-              "fieldName": "lengthUnit"
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText"
             },
             {
-              "name": "aria-label",
+              "name": "toggletip-text",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
+              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "fieldName": "toggletipText"
             },
             {
-              "name": "aria-labelledby",
+              "name": "toggletip-placement",
               "type": {
-                "text": "string | null"
+                "text": "PopoverPlacement"
               },
-              "default": "null",
-              "description": "Aria-labelledby attribute to be set for accessibility",
-              "fieldName": "ariaLabelledBy"
+              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "default": "'top'",
+              "fieldName": "toggletipPlacement"
+            },
+            {
+              "name": "info-icon-aria-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
+              "fieldName": "infoIconAriaLabel"
+            },
+            {
+              "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",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-icon",
-          "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n *   by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n *   the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n */",
+          "tagName": "mdc-formfieldwrapper",
+          "jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n *  that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n *\n */",
           "customElement": true
         }
       ],
@@ -11711,108 +11824,136 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Icon",
-            "module": "components/icon/icon.component.js"
+            "name": "FormfieldWrapper",
+            "module": "components/formfieldwrapper/formfieldwrapper.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/formfieldwrapper/formfieldwrapper.component.js",
+      "path": "components/icon/icon.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "formfieldwrapper is a component that contains the label and helper/validation text\n that can be configured in various ways to suit different use cases (most of the input related components).\nIt is used as an internal component and is not intended to be used directly by consumers.",
-          "name": "FormfieldWrapper",
+          "description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n  by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n  the role will be unset.\n\n### Informative Standalone Icons\n- If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\nhave a Tooltip that describes what it means.\n- For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\nand the `role` will be set to \"img\" automatically.\n- **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**",
+          "name": "Icon",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the default fill color.",
+              "name": "--mdc-icon-fill-color"
+            },
+            {
+              "description": "Allows customization of the icon size.",
+              "name": "--mdc-icon-size"
+            },
+            {
+              "description": "Allows customization of the icon border radius.",
+              "name": "--mdc-icon-border-radius"
+            }
+          ],
           "members": [
             {
               "kind": "field",
-              "name": "label",
+              "name": "iconData",
               "type": {
-                "text": "string | undefined"
+                "text": "HTMLElement | undefined"
               },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "attribute": "label",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "lengthUnitFromContext",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
-              "attribute": "required",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "id",
+              "name": "sizeFromContext",
               "type": {
-                "text": "string"
+                "text": "number | undefined"
               },
-              "default": "''",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "attribute": "id"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "helpTextType",
+              "name": "name",
               "type": {
-                "text": "ValidationType"
+                "text": "IconNames | undefined"
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "attribute": "help-text-type",
+              "description": "Name of the icon (= filename)",
+              "attribute": "name",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "helpText",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "number | undefined"
               },
-              "description": "The help text that is displayed below the input field.",
-              "attribute": "help-text",
-              "reflects": true
+              "description": "Size of the icon (works in combination with length unit)",
+              "attribute": "size"
             },
             {
               "kind": "field",
-              "name": "toggletipText",
+              "name": "lengthUnit",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
-              "attribute": "toggletip-text",
-              "reflects": true
+              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
+              "attribute": "length-unit"
             },
             {
               "kind": "field",
-              "name": "toggletipPlacement",
+              "name": "ariaLabel",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "string | null"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "attribute": "toggletip-placement",
-              "reflects": true
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
             },
             {
               "kind": "field",
-              "name": "infoIconAriaLabel",
+              "name": "ariaLabelledBy",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
-              "attribute": "info-icon-aria-label",
-              "reflects": true
+              "default": "null",
+              "description": "Aria-labelledby attribute to be set for accessibility",
+              "attribute": "aria-labelledby"
+            },
+            {
+              "kind": "field",
+              "name": "iconProviderContext",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "abortController",
+              "type": {
+                "text": "AbortController"
+              },
+              "privacy": "private",
+              "default": "new AbortController()"
             },
             {
               "kind": "method",
-              "name": "renderLabelElement",
-              "privacy": "protected",
-              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
+              "name": "prepareIconElement",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "iconData",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The icon string to be parsed"
+                }
+              ],
+              "description": "Parse the icon string to an html element, set the attributes and\nreturn the icon element",
               "return": {
                 "type": {
                   "text": ""
@@ -11821,158 +11962,102 @@
             },
             {
               "kind": "method",
-              "name": "renderHelpTextIcon",
-              "privacy": "protected",
-              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
+              "name": "getIconData",
+              "privacy": "private",
+              "description": "Fetches the icon (currently only svg) and sets state and attributes once fetched successfully\n\nThis method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.\nIf the request is aborted after the fetch() call has been fulfilled but before the response body has been read,\nthen attempting to read the response body will reject with an AbortError exception."
             },
             {
               "kind": "method",
-              "name": "renderHelpText",
-              "privacy": "protected",
-              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
-              "return": {
-                "type": {
-                  "text": ""
+              "name": "handleIconLoadedSuccess",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "iconHtml",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The icon html element which has been fetched from the icon provider."
                 }
-              }
+              ],
+              "description": "Sets the iconData state to the fetched icon.\nDispatches a 'load' event on the component once the icon has been successfully loaded."
             },
             {
               "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
-              "return": {
-                "type": {
-                  "text": ""
+              "name": "handleIconLoadedFailure",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "error",
+                  "type": {
+                    "text": "unknown"
+                  }
                 }
-              }
+              ],
+              "description": "Dispatches an 'error' event on the component when the icon fetching has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
             },
             {
               "kind": "method",
-              "name": "renderHelperText",
-              "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
+              "name": "updateSize",
+              "privacy": "private",
+              "description": "Updates the size by setting the width and height"
             },
             {
               "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
-              }
+              "name": "computedIconSize",
+              "privacy": "private",
+              "readonly": true
             }
           ],
           "attributes": [
             {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "fieldName": "label"
-            },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
-              "fieldName": "required"
-            },
-            {
-              "name": "id",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "fieldName": "id"
-            },
-            {
-              "name": "help-text-type",
+              "name": "name",
               "type": {
-                "text": "ValidationType"
+                "text": "IconNames | undefined"
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "fieldName": "helpTextType"
+              "description": "Name of the icon (= filename)",
+              "fieldName": "name"
             },
             {
-              "name": "help-text",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "number | undefined"
               },
-              "description": "The help text that is displayed below the input field.",
-              "fieldName": "helpText"
+              "description": "Size of the icon (works in combination with length unit)",
+              "fieldName": "size"
             },
             {
-              "name": "toggletip-text",
+              "name": "length-unit",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
-              "fieldName": "toggletipText"
-            },
-            {
-              "name": "toggletip-placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "fieldName": "toggletipPlacement"
+              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
+              "fieldName": "lengthUnit"
             },
             {
-              "name": "info-icon-aria-label",
+              "name": "aria-label",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
-              "fieldName": "infoIconAriaLabel"
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
             },
             {
-              "name": "disabled",
+              "name": "aria-labelledby",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | null"
               },
-              "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": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
+              "default": "null",
+              "description": "Aria-labelledby attribute to be set for accessibility",
+              "fieldName": "ariaLabelledBy"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-formfieldwrapper",
-          "jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n *  that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n *\n */",
+          "tagName": "mdc-icon",
+          "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n *   by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n *   the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n */",
           "customElement": true
         }
       ],
@@ -11981,8 +12066,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "FormfieldWrapper",
-            "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+            "name": "Icon",
+            "module": "components/icon/icon.component.js"
           }
         }
       ]
@@ -18615,13 +18700,30 @@
             },
             {
               "kind": "field",
-              "name": "enabledFocusTrap",
+              "name": "focusTrap",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
               "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "attribute": "enabledFocusTrap",
+              "default": "false",
+              "attribute": "focus-trap",
+              "reflects": true,
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "shouldFocusTrapWrap",
+              "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 `enabledFocusTrap` is true.",
+              "attribute": "should-focus-trap-wrap",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "utils/mixins/FocusTrapMixin.js"
@@ -18642,11 +18744,10 @@
               }
             },
             {
-              "kind": "field",
-              "name": "shouldWrapFocus",
-              "type": {
-                "text": "() => boolean"
-              },
+              "kind": "method",
+              "name": "activateFocusTrap",
+              "privacy": "public",
+              "description": "Activate the focus trap\nThis calculates the focusable elements within the component's shadow root",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "utils/mixins/FocusTrapMixin.js"
@@ -18926,7 +19027,7 @@
               "privacy": "public",
               "parameters": [
                 {
-                  "name": "prefferableElement",
+                  "name": "elementIndexToReceiveFocus",
                   "default": "0",
                   "type": {
                     "text": "number"
@@ -19062,7 +19163,7 @@
             },
             {
               "kind": "method",
-              "name": "handleKeydown",
+              "name": "handleTabKeydown",
               "privacy": "private",
               "parameters": [
                 {
@@ -19184,21 +19285,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "focusTrap",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "default": "false",
-              "attribute": "focus-trap",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "preventScroll",
@@ -19475,7 +19561,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
+              "description": "Disable setting the aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
               "default": "false",
               "attribute": "disable-aria-expanded",
               "reflects": true,
@@ -19484,6 +19570,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "disableAriaHasPopup",
+              "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,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "arrowElement",
@@ -19712,13 +19813,13 @@
               }
             },
             {
-              "name": "enabledFocusTrap",
+              "name": "should-focus-trap-wrap",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "fieldName": "enabledFocusTrap",
+              "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 `enabledFocusTrap` is true.",
+              "fieldName": "shouldFocusTrapWrap",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "src/utils/mixins/FocusTrapMixin.ts"
@@ -20080,13 +20181,26 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
+              "description": "Disable setting the aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
               "default": "false",
               "fieldName": "disableAriaExpanded",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "src/components/popover/popover.component.ts"
               }
+            },
+            {
+              "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",
+              "fieldName": "disableAriaHasPopup",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             }
           ],
           "cssProperties": [
@@ -23120,10 +23234,15 @@
               "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.",
               "default": "false",
               "attribute": "focus-trap",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
             },
             {
               "kind": "field",
@@ -23329,11 +23448,22 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
+              "description": "Disable setting the aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
               "default": "false",
               "attribute": "disable-aria-expanded",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "disableAriaHasPopup",
+              "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
+            },
             {
               "kind": "field",
               "name": "arrowElement",
@@ -23471,13 +23601,14 @@
             },
             {
               "kind": "field",
-              "name": "enabledFocusTrap",
+              "name": "shouldFocusTrapWrap",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "attribute": "enabledFocusTrap",
+              "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 `enabledFocusTrap` is true.",
+              "attribute": "should-focus-trap-wrap",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "utils/mixins/FocusTrapMixin.js"
@@ -23498,11 +23629,10 @@
               }
             },
             {
-              "kind": "field",
-              "name": "shouldWrapFocus",
-              "type": {
-                "text": "() => boolean"
-              },
+              "kind": "method",
+              "name": "activateFocusTrap",
+              "privacy": "public",
+              "description": "Activate the focus trap\nThis calculates the focusable elements within the component's shadow root",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "utils/mixins/FocusTrapMixin.js"
@@ -23782,7 +23912,7 @@
               "privacy": "public",
               "parameters": [
                 {
-                  "name": "prefferableElement",
+                  "name": "elementIndexToReceiveFocus",
                   "default": "0",
                   "type": {
                     "text": "number"
@@ -23918,7 +24048,7 @@
             },
             {
               "kind": "method",
-              "name": "handleKeydown",
+              "name": "handleTabKeydown",
               "privacy": "private",
               "parameters": [
                 {
@@ -24198,18 +24328,27 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
+              "description": "Disable setting the aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
               "default": "false",
               "fieldName": "disableAriaExpanded"
             },
             {
-              "name": "enabledFocusTrap",
+              "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",
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "fieldName": "enabledFocusTrap",
+              "fieldName": "disableAriaHasPopup"
+            },
+            {
+              "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 `enabledFocusTrap` is true.",
+              "fieldName": "shouldFocusTrapWrap",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "src/utils/mixins/FocusTrapMixin.ts"
@@ -29257,6 +29396,88 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/skeleton/skeleton.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-skeleton` is a component that shows a grey placeholder area.\nIt provides visual feedback to users that content is being loaded.\n\n**Skeleton Variants:**\n- **rectangular**: Default variant with 0.25rem border radius\n- **rounded**: Has 0.5rem border radius\n- **circular**: Has 50% border radius for circular shapes\n- **button**: Optimized for button placeholders with 1.25rem border radius\n\n**Sizing Behavior:**\n1. If wrapping content, takes dimensions of wrapped content\n2. Otherwise grows to fill parent container",
+          "name": "Skeleton",
+          "cssProperties": [
+            {
+              "description": "background color of the skeleton",
+              "name": "--mdc-skeleton-background-color"
+            },
+            {
+              "description": "height of the skeleton",
+              "name": "--mdc-skeleton-height"
+            },
+            {
+              "description": "width of the skeleton",
+              "name": "--mdc-skeleton-width"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Content to wrap (optional). When provided, skeleton takes dimensions of this content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "SkeletonVariant"
+              },
+              "description": "The variant of skeleton to display\n- **rectangular**: Default rectangular shape with 0.25rem border radius\n- **rounded**: Rounded rectangle with 0.5rem border radius\n- **circular**: Circular shape with 50% border radius\n- **button**: Button placeholder with 1.25rem border radius",
+              "default": "rectangular",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "checkSlotContent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "SkeletonVariant"
+              },
+              "description": "The variant of skeleton to display\n- **rectangular**: Default rectangular shape with 0.25rem border radius\n- **rounded**: Rounded rectangle with 0.5rem border radius\n- **circular**: Circular shape with 50% border radius\n- **button**: Button placeholder with 1.25rem border radius",
+              "default": "rectangular",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-skeleton",
+          "jsDoc": "/**\n * `mdc-skeleton` is a component that shows a grey placeholder area.\n * It provides visual feedback to users that content is being loaded.\n *\n * **Skeleton Variants:**\n * - **rectangular**: Default variant with 0.25rem border radius\n * - **rounded**: Has 0.5rem border radius\n * - **circular**: Has 50% border radius for circular shapes\n * - **button**: Optimized for button placeholders with 1.25rem border radius\n *\n * **Sizing Behavior:**\n * 1. If wrapping content, takes dimensions of wrapped content\n * 2. Otherwise grows to fill parent container\n *\n * @tagname mdc-skeleton\n *\n * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.\n *\n * @cssproperty --mdc-skeleton-background-color - background color of the skeleton\n * @cssproperty --mdc-skeleton-height - height of the skeleton\n * @cssproperty --mdc-skeleton-width - width of the skeleton\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Skeleton",
+            "module": "components/skeleton/skeleton.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/spinner/spinner.component.js",
@@ -32756,13 +32977,30 @@
             },
             {
               "kind": "field",
-              "name": "enabledFocusTrap",
+              "name": "focusTrap",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
+              "privacy": "protected",
               "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "attribute": "enabledFocusTrap",
+              "default": "false",
+              "attribute": "focus-trap",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "shouldFocusTrapWrap",
+              "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 `enabledFocusTrap` is true.",
+              "attribute": "should-focus-trap-wrap",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -32783,11 +33021,10 @@
               }
             },
             {
-              "kind": "field",
-              "name": "shouldWrapFocus",
-              "type": {
-                "text": "() => boolean"
-              },
+              "kind": "method",
+              "name": "activateFocusTrap",
+              "privacy": "public",
+              "description": "Activate the focus trap\nThis calculates the focusable elements within the component's shadow root",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -33067,7 +33304,7 @@
               "privacy": "public",
               "parameters": [
                 {
-                  "name": "prefferableElement",
+                  "name": "elementIndexToReceiveFocus",
                   "default": "0",
                   "type": {
                     "text": "number"
@@ -33203,7 +33440,7 @@
             },
             {
               "kind": "method",
-              "name": "handleKeydown",
+              "name": "handleTabKeydown",
               "privacy": "private",
               "parameters": [
                 {
@@ -33325,21 +33562,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "focusTrap",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "default": "false",
-              "attribute": "focus-trap",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "preventScroll",
@@ -33616,7 +33838,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
+              "description": "Disable setting the aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
               "default": "false",
               "attribute": "disable-aria-expanded",
               "reflects": true,
@@ -33625,6 +33847,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "disableAriaHasPopup",
+              "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,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "arrowElement",
@@ -33873,13 +34110,13 @@
               "fieldName": "screenreaderAnnouncerIdentity"
             },
             {
-              "name": "enabledFocusTrap",
+              "name": "should-focus-trap-wrap",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "fieldName": "enabledFocusTrap",
+              "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 `enabledFocusTrap` is true.",
+              "fieldName": "shouldFocusTrapWrap",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "src/components/popover/popover.component.ts"
@@ -34241,13 +34478,26 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
+              "description": "Disable setting the aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
               "default": "false",
               "fieldName": "disableAriaExpanded",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "src/components/popover/popover.component.ts"
               }
+            },
+            {
+              "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",
+              "fieldName": "disableAriaHasPopup",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             }
           ],
           "superclass": {
@@ -34470,13 +34720,30 @@
             },
             {
               "kind": "field",
-              "name": "enabledFocusTrap",
+              "name": "focusTrap",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
+              "privacy": "protected",
               "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "attribute": "enabledFocusTrap",
+              "default": "false",
+              "attribute": "focus-trap",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "shouldFocusTrapWrap",
+              "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 `enabledFocusTrap` is true.",
+              "attribute": "should-focus-trap-wrap",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -34497,11 +34764,10 @@
               }
             },
             {
-              "kind": "field",
-              "name": "shouldWrapFocus",
-              "type": {
-                "text": "() => boolean"
-              },
+              "kind": "method",
+              "name": "activateFocusTrap",
+              "privacy": "public",
+              "description": "Activate the focus trap\nThis calculates the focusable elements within the component's shadow root",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -34781,7 +35047,7 @@
               "privacy": "public",
               "parameters": [
                 {
-                  "name": "prefferableElement",
+                  "name": "elementIndexToReceiveFocus",
                   "default": "0",
                   "type": {
                     "text": "number"
@@ -34917,7 +35183,7 @@
             },
             {
               "kind": "method",
-              "name": "handleKeydown",
+              "name": "handleTabKeydown",
               "privacy": "private",
               "parameters": [
                 {
@@ -35039,21 +35305,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "focusTrap",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "default": "false",
-              "attribute": "focus-trap",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "preventScroll",
@@ -35330,7 +35581,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
+              "description": "Disable setting the aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
               "default": "false",
               "attribute": "disable-aria-expanded",
               "reflects": true,
@@ -35339,6 +35590,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "disableAriaHasPopup",
+              "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,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "arrowElement",
@@ -35588,13 +35854,13 @@
               "fieldName": "tooltipType"
             },
             {
-              "name": "enabledFocusTrap",
+              "name": "should-focus-trap-wrap",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "fieldName": "enabledFocusTrap",
+              "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 `enabledFocusTrap` is true.",
+              "fieldName": "shouldFocusTrapWrap",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "src/components/popover/popover.component.ts"
@@ -35956,13 +36222,26 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
+              "description": "Disable setting the aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
               "default": "false",
               "fieldName": "disableAriaExpanded",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "src/components/popover/popover.component.ts"
               }
+            },
+            {
+              "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",
+              "fieldName": "disableAriaHasPopup",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             }
           ],
           "superclass": {
@@ -37198,10 +37477,11 @@
           "members": [
             {
               "kind": "field",
-              "name": "enabledFocusTrap",
+              "name": "focusTrap",
               "type": {
                 "text": "boolean"
-              }
+              },
+              "privacy": "protected"
             },
             {
               "kind": "field",
@@ -37210,15 +37490,6 @@
                 "text": "boolean"
               }
             },
-            {
-              "kind": "method",
-              "name": "setFocusableElements",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
             {
               "kind": "method",
               "name": "setInitialFocus",
@@ -37229,7 +37500,7 @@
               },
               "parameters": [
                 {
-                  "name": "prefferableElement",
+                  "name": "elementIndexToReceiveFocus",
                   "optional": true,
                   "type": {
                     "text": "number"
@@ -37237,6 +37508,15 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "activateFocusTrap",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "deactivateFocusTrap",
@@ -37255,13 +37535,24 @@
           "members": [
             {
               "kind": "field",
-              "name": "enabledFocusTrap",
+              "name": "focusTrap",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
+              "privacy": "protected",
               "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "attribute": "enabledFocusTrap"
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "shouldFocusTrapWrap",
+              "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 `enabledFocusTrap` is true.",
+              "attribute": "should-focus-trap-wrap",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -37274,11 +37565,10 @@
               "attribute": "enabledPreventScroll"
             },
             {
-              "kind": "field",
-              "name": "shouldWrapFocus",
-              "type": {
-                "text": "() => boolean"
-              }
+              "kind": "method",
+              "name": "activateFocusTrap",
+              "privacy": "public",
+              "description": "Activate the focus trap\nThis calculates the focusable elements within the component's shadow root"
             },
             {
               "kind": "method",
@@ -37506,7 +37796,7 @@
               "privacy": "public",
               "parameters": [
                 {
-                  "name": "prefferableElement",
+                  "name": "elementIndexToReceiveFocus",
                   "default": "0",
                   "type": {
                     "text": "number"
@@ -37618,7 +37908,7 @@
             },
             {
               "kind": "method",
-              "name": "handleKeydown",
+              "name": "handleTabKeydown",
               "privacy": "private",
               "parameters": [
                 {
@@ -37634,13 +37924,13 @@
           ],
           "attributes": [
             {
-              "name": "enabledFocusTrap",
+              "name": "should-focus-trap-wrap",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "fieldName": "enabledFocusTrap"
+              "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 `enabledFocusTrap` is true.",
+              "fieldName": "shouldFocusTrapWrap"
             },
             {
               "name": "enabledPreventScroll",