@momentum-design/components 0.83.1 → 0.83.3

package/dist/custom-elements.json

@@ -2132,6 +2132,77 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/bullet/bullet.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
+          "name": "Bullet",
+          "cssProperties": [
+            {
+              "description": "background color of the bullet",
+              "name": "--mdc-bullet-background-color"
+            },
+            {
+              "description": "small size value of the bullet",
+              "name": "--mdc-bullet-size-small"
+            },
+            {
+              "description": "medium size value of the bullet",
+              "name": "--mdc-bullet-size-medium"
+            },
+            {
+              "description": "large size value of the bullet",
+              "name": "--mdc-bullet-size-large"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "privacy": "public",
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "attribute": "size",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-bullet",
+          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Bullet",
+            "module": "components/bullet/bullet.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.component.js",
@@ -2827,77 +2898,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/bullet/bullet.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
-          "name": "Bullet",
-          "cssProperties": [
-            {
-              "description": "background color of the bullet",
-              "name": "--mdc-bullet-background-color"
-            },
-            {
-              "description": "small size value of the bullet",
-              "name": "--mdc-bullet-size-small"
-            },
-            {
-              "description": "medium size value of the bullet",
-              "name": "--mdc-bullet-size-medium"
-            },
-            {
-              "description": "large size value of the bullet",
-              "name": "--mdc-bullet-size-large"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "privacy": "public",
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "attribute": "size",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-bullet",
-          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Bullet",
-            "module": "components/bullet/bullet.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/buttongroup/buttongroup.component.js",
@@ -6454,248 +6454,100 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/checkbox/checkbox.component.js",
+      "path": "components/chip/chip.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selections in lists.\n\nA checkbox component contains an optional label and an optional helper text.\n\nTo create a group of checkboxes, use the FormFieldGroup component.",
-          "name": "Checkbox",
+          "description": "mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.\nConsumers can wrap this component around a tooltip to provide additional context.\n\nIt is recommended to keep the label text for the chip component concise and compact.\nFor best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.\n\nThis component is built by extending Buttonsimple.",
+          "name": "Chip",
           "cssProperties": [
             {
-              "description": "Allows customization of the background color on hover.",
-              "name": "--mdc-checkbox-background-color-hover"
-            },
-            {
-              "description": "Background color for a selected checkbox when hovered.",
-              "name": "--mdc-checkbox-checked-background-color-hover"
-            },
-            {
-              "description": "Background color for a selected checkbox when pressed.",
-              "name": "--mdc-checkbox-checked-pressed-icon-color"
+              "description": "The color of the chip.",
+              "name": "--mdc-chip-color"
             },
             {
-              "description": "Background color for a selected checkbox when pressed.",
-              "name": "--mdc-checkbox-pressed-icon-color"
+              "description": "The border color of the chip.",
+              "name": "--mdc-chip-border-color"
             },
             {
-              "description": "Background color for a selected checkbox when disabled.",
-              "name": "--mdc-checkbox-disabled-checked-icon-color"
+              "description": "The background color of the chip.",
+              "name": "--mdc-chip-background-color"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the checkbox is selected or unselected.",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "indeterminate",
+              "name": "color",
               "type": {
-                "text": "boolean"
+                "text": "ColorType"
               },
-              "default": "false",
-              "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
-              "attribute": "indeterminate",
+              "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
+              "default": "default",
+              "attribute": "color",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "autofocus",
+              "name": "label",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
-              "attribute": "autofocus",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "setFormValue",
-              "privacy": "private",
-              "description": "Updates the form value to reflect the current state of the checkbox.\nIf checked, the value is set to either the user-provided value or 'on' if no value is provided.\nIf unchecked, the value is set to null."
-            },
-            {
-              "kind": "method",
-              "name": "manageRequired",
-              "privacy": "private",
-              "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the required property is set, then the checkbox is invalid."
-            },
-            {
-              "kind": "method",
-              "name": "toggleState",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+                "text": "string"
               },
-              "description": "Toggles the state of the checkbox element.\nIf the element is not disabled, then\nthe checked property is toggled and the indeterminate property is set to false."
+              "default": "''",
+              "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
+              "attribute": "label"
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
+              "name": "renderIcon",
               "privacy": "private",
+              "description": "Renders the icon element if available.",
               "return": {
                 "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the checkbox.\nWhen the user presses Enter, the form is submitted."
-            },
-            {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
+                  "text": ""
                 }
-              ],
-              "description": "Toggles the state of the checkbox element.\nand dispatch the new change event."
-            },
-            {
-              "kind": "field",
-              "name": "renderLabelAndHelperText",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "attribute": "name",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "iconName",
               "type": {
-                "text": "string"
+                "text": "IconNames | undefined"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "attribute": "value",
-              "reflects": true,
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "IconNameMixin",
+                "module": "utils/mixins/IconNameMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "validationMessage",
+              "name": "autofocus",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
-              "attribute": "validation-message",
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
+              "attribute": "autofocus",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "validity",
-              "type": {
-                "text": "ValidityState"
-              },
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "willValidate",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "setValidity",
-              "description": "Sets the validity of the input field based on the input field's validity.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "checkValidity",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "reportValidity",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "dataAriaLabel",
+              "name": "tabIndex",
               "type": {
-                "text": "string | null"
+                "text": "number"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
@@ -6709,294 +6561,299 @@
               "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "active",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "attribute": "label",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
+              "attribute": "active",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "softDisabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | 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",
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "attribute": "soft-disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "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.",
-              "attribute": "id",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "helpTextType",
+              "name": "size",
               "type": {
-                "text": "ValidationType"
+                "text": "ButtonSize"
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "attribute": "help-text-type",
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "attribute": "size",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "helpText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The help text that is displayed below the input field.",
-              "attribute": "help-text",
+              "name": "role",
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "attribute": "role",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "toggletipText",
+              "name": "ariaStateKey",
               "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,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "toggletipPlacement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "attribute": "toggletip-placement",
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed' (when)",
+              "attribute": "ariaStateKey",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "infoIconAriaLabel",
+              "name": "type",
               "type": {
-                "text": "string | undefined"
+                "text": "ButtonType"
               },
-              "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",
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "attribute": "type",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderLabelElement",
+              "name": "executeAction",
               "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": ""
-                }
-              },
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderHelpTextIcon",
+              "name": "setActive",
               "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": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "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": ""
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element"
+                },
+                {
+                  "name": "active",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The active state of the element"
                 }
-              },
+              ],
+              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
-              "return": {
-                "type": {
-                  "text": ""
+              "name": "setSoftDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "softDisabled",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The soft-disabled state."
                 }
-              },
+              ],
+              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderHelperText",
-              "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
-              "return": {
-                "type": {
-                  "text": ""
+              "name": "setDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The disabled state."
                 }
-              },
+              ],
+              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
-            }
-          ],
-          "events": [
+            },
             {
-              "type": {
-                "text": "EventConstructor"
+              "kind": "method",
+              "name": "triggerClickEvent",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "description": "(React: onChange) Event that gets dispatched when the checkbox state changes.",
-              "name": "change",
-              "reactName": "onChange"
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "description": "(React: onFocus) Event that gets dispatched when the checkbox receives focus.",
-              "name": "focus",
-              "reactName": "onFocus"
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyUp",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             }
           ],
           "attributes": [
             {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the checkbox is selected or unselected.",
-              "fieldName": "checked"
-            },
-            {
-              "name": "indeterminate",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
-              "fieldName": "indeterminate"
-            },
-            {
-              "name": "autofocus",
+              "name": "color",
               "type": {
-                "text": "boolean"
+                "text": "ColorType"
               },
-              "default": "false",
-              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
-              "fieldName": "autofocus"
+              "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
+              "default": "default",
+              "fieldName": "color"
             },
             {
-              "name": "name",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
-              }
+              "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
+              "fieldName": "label"
             },
             {
-              "name": "value",
+              "name": "icon-name",
               "type": {
-                "text": "string"
+                "text": "IconNames | undefined"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "fieldName": "value",
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "IconNameMixin",
+                "module": "src/utils/mixins/IconNameMixin.ts"
               }
             },
             {
-              "name": "validation-message",
+              "name": "autofocus",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
-              "fieldName": "validationMessage",
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
+              "fieldName": "autofocus",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "data-aria-label",
+              "name": "tabIndex",
               "type": {
-                "text": "string | null"
+                "text": "number"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
@@ -7008,127 +6865,137 @@
               "default": "undefined",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "label",
+              "name": "active",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "fieldName": "label",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
+              "fieldName": "active",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "required",
+              "name": "soft-disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | 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.",
-              "fieldName": "required",
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "fieldName": "softDisabled",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "id",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "ButtonSize"
               },
-              "default": "''",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "fieldName": "id",
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "fieldName": "size",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "help-text-type",
-              "type": {
-                "text": "ValidationType"
-              },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "fieldName": "helpTextType",
+              "name": "role",
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "fieldName": "role",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "help-text",
+              "name": "ariaStateKey",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The help text that is displayed below the input field.",
-              "fieldName": "helpText",
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed' (when)",
+              "fieldName": "ariaStateKey",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "toggletip-text",
+              "name": "type",
               "type": {
-                "text": "string | undefined"
+                "text": "ButtonType"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
-              "fieldName": "toggletipText",
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "fieldName": "type",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
-            },
+            }
+          ],
+          "mixins": [
             {
-              "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",
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Buttonsimple",
+            "module": "/src/components/buttonsimple/buttonsimple.component"
+          },
+          "tagName": "mdc-chip",
+          "jsDoc": "/**\n * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.\n * Consumers can wrap this component around a tooltip to provide additional context.\n *\n * It is recommended to keep the label text for the chip component concise and compact.\n * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,\n * including empty spaces to split words.\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-chip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n */",
+          "customElement": true,
+          "events": [
+            {
+              "description": "(React: onClick) This event is dispatched when the button is clicked.",
+              "name": "click",
+              "reactName": "onClick",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "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",
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
-            }
-          ],
-          "mixins": [
+            },
             {
-              "name": "FormInternalsMixin",
-              "module": "/src/utils/mixins/FormInternalsMixin"
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
+              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             }
-          ],
-          "superclass": {
-            "name": "FormfieldWrapper",
-            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
-          },
-          "tagName": "mdc-checkbox",
-          "jsDoc": "/**\n * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selections in lists.\n *\n * A checkbox component contains an optional label and an optional helper text.\n *\n * To create a group of checkboxes, use the FormFieldGroup component.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-checkbox\n *\n * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.\n *\n * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.\n * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.\n */",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
@@ -7136,108 +7003,256 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Checkbox",
-            "module": "components/checkbox/checkbox.component.js"
+            "name": "Chip",
+            "module": "components/chip/chip.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/chip/chip.component.js",
+      "path": "components/checkbox/checkbox.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.\nConsumers can wrap this component around a tooltip to provide additional context.\n\nIt is recommended to keep the label text for the chip component concise and compact.\nFor best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.\n\nThis component is built by extending Buttonsimple.",
-          "name": "Chip",
+          "description": "Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selections in lists.\n\nA checkbox component contains an optional label and an optional helper text.\n\nTo create a group of checkboxes, use the FormFieldGroup component.",
+          "name": "Checkbox",
           "cssProperties": [
             {
-              "description": "The color of the chip.",
-              "name": "--mdc-chip-color"
+              "description": "Allows customization of the background color on hover.",
+              "name": "--mdc-checkbox-background-color-hover"
             },
             {
-              "description": "The border color of the chip.",
-              "name": "--mdc-chip-border-color"
+              "description": "Background color for a selected checkbox when hovered.",
+              "name": "--mdc-checkbox-checked-background-color-hover"
             },
             {
-              "description": "The background color of the chip.",
-              "name": "--mdc-chip-background-color"
+              "description": "Background color for a selected checkbox when pressed.",
+              "name": "--mdc-checkbox-checked-pressed-icon-color"
+            },
+            {
+              "description": "Background color for a selected checkbox when pressed.",
+              "name": "--mdc-checkbox-pressed-icon-color"
+            },
+            {
+              "description": "Background color for a selected checkbox when disabled.",
+              "name": "--mdc-checkbox-disabled-checked-icon-color"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "color",
+              "name": "checked",
               "type": {
-                "text": "ColorType"
+                "text": "boolean"
               },
-              "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
-              "default": "default",
-              "attribute": "color",
+              "default": "false",
+              "description": "Determines whether the checkbox is selected or unselected.",
+              "attribute": "checked",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "indeterminate",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
-              "attribute": "label"
+              "default": "false",
+              "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
+              "attribute": "indeterminate",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
+              "attribute": "autofocus",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "renderIcon",
+              "name": "setFormValue",
+              "privacy": "private",
+              "description": "Updates the form value to reflect the current state of the checkbox.\nIf checked, the value is set to either the user-provided value or 'on' if no value is provided.\nIf unchecked, the value is set to null."
+            },
+            {
+              "kind": "method",
+              "name": "manageRequired",
+              "privacy": "private",
+              "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the required property is set, then the checkbox is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "toggleState",
               "privacy": "private",
-              "description": "Renders the icon element if available.",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
+                }
+              },
+              "description": "Toggles the state of the checkbox element.\nIf the element is not disabled, then\nthe checked property is toggled and the indeterminate property is set to false."
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the checkbox.\nWhen the user presses Enter, the form is submitted."
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
                 }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "Toggles the state of the checkbox element.\nand dispatch the new change event."
+            },
+            {
+              "kind": "field",
+              "name": "renderLabelAndHelperText",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "iconName",
+              "name": "value",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "autofocus",
+              "name": "validationMessage",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
-              "attribute": "autofocus",
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "attribute": "validation-message",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "tabIndex",
+              "name": "validity",
               "type": {
-                "text": "number"
+                "text": "ValidityState"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
               }
             },
             {
@@ -7251,299 +7266,294 @@
               "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "label",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
-              "default": "undefined",
-              "attribute": "active",
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "attribute": "label",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "softDisabled",
+              "name": "required",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "attribute": "soft-disabled",
+              "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,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "id",
               "type": {
-                "text": "ButtonSize"
+                "text": "string"
               },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
-              "attribute": "size",
-              "reflects": true,
+              "default": "''",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "attribute": "id",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "role",
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "attribute": "role",
+              "name": "helpTextType",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "attribute": "help-text-type",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "ariaStateKey",
+              "name": "helpText",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "attribute": "ariaStateKey",
+              "description": "The help text that is displayed below the input field.",
+              "attribute": "help-text",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "toggletipText",
               "type": {
-                "text": "ButtonType"
+                "text": "string | undefined"
               },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "button",
-              "attribute": "type",
+              "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,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "executeAction",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "setActive",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element"
-                },
-                {
-                  "name": "active",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The active state of the element"
-                }
-              ],
-              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
+              "kind": "field",
+              "name": "toggletipPlacement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "default": "'top'",
+              "attribute": "toggletip-placement",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "setSoftDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "softDisabled",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The soft-disabled state."
-                }
-              ],
-              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
+              "kind": "field",
+              "name": "infoIconAriaLabel",
+              "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.",
+              "attribute": "info-icon-aria-label",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "setDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "disabled",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The disabled state."
+              "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": ""
                 }
-              ],
-              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "private",
+              "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": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private",
-              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
+              "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": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
+              "name": "renderLabel",
+              "privacy": "protected",
+              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "handleKeyUp",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
+              "name": "renderHelperText",
+              "privacy": "protected",
+              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             }
           ],
+          "events": [
+            {
+              "type": {
+                "text": "EventConstructor"
+              }
+            },
+            {
+              "description": "(React: onChange) Event that gets dispatched when the checkbox state changes.",
+              "name": "change",
+              "reactName": "onChange"
+            },
+            {
+              "description": "(React: onFocus) Event that gets dispatched when the checkbox receives focus.",
+              "name": "focus",
+              "reactName": "onFocus"
+            }
+          ],
           "attributes": [
             {
-              "name": "color",
+              "name": "checked",
               "type": {
-                "text": "ColorType"
+                "text": "boolean"
               },
-              "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
-              "default": "default",
-              "fieldName": "color"
+              "default": "false",
+              "description": "Determines whether the checkbox is selected or unselected.",
+              "fieldName": "checked"
             },
             {
-              "name": "label",
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
+              "fieldName": "indeterminate"
+            },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
+              "fieldName": "autofocus"
+            },
+            {
+              "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
-              "fieldName": "label"
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
             },
             {
-              "name": "icon-name",
+              "name": "value",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value",
               "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "name": "autofocus",
+              "name": "validation-message",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
-              "fieldName": "autofocus",
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "fieldName": "validationMessage",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "name": "tabIndex",
+              "name": "data-aria-label",
               "type": {
-                "text": "number"
+                "text": "string | null"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
               }
             },
             {
@@ -7555,137 +7565,127 @@
               "default": "undefined",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
-              "name": "active",
+              "name": "label",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
-              "default": "undefined",
-              "fieldName": "active",
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "fieldName": "label",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "soft-disabled",
+              "name": "required",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "fieldName": "softDisabled",
+              "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",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "size",
+              "name": "id",
               "type": {
-                "text": "ButtonSize"
+                "text": "string"
               },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
-              "fieldName": "size",
+              "default": "''",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "fieldName": "id",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "role",
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "fieldName": "role",
+              "name": "help-text-type",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "fieldName": "helpTextType",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "ariaStateKey",
+              "name": "help-text",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "fieldName": "ariaStateKey",
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "type",
+              "name": "toggletip-text",
               "type": {
-                "text": "ButtonType"
+                "text": "string | undefined"
               },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "button",
-              "fieldName": "type",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Buttonsimple",
-            "module": "/src/components/buttonsimple/buttonsimple.component"
-          },
-          "tagName": "mdc-chip",
-          "jsDoc": "/**\n * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.\n * Consumers can wrap this component around a tooltip to provide additional context.\n *\n * It is recommended to keep the label text for the chip component concise and compact.\n * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,\n * including empty spaces to split words.\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-chip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n */",
-          "customElement": true,
-          "events": [
-            {
-              "description": "(React: onClick) This event is dispatched when the button is clicked.",
-              "name": "click",
-              "reactName": "onClick",
+              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "fieldName": "toggletipText",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
-              "name": "keydown",
-              "reactName": "onKeyDown",
+              "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",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
-              "name": "keyup",
-              "reactName": "onKeyUp",
+              "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",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
             }
-          ]
+          ],
+          "superclass": {
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
+          },
+          "tagName": "mdc-checkbox",
+          "jsDoc": "/**\n * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selections in lists.\n *\n * A checkbox component contains an optional label and an optional helper text.\n *\n * To create a group of checkboxes, use the FormFieldGroup component.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-checkbox\n *\n * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.\n *\n * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.\n * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -7693,8 +7693,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Chip",
-            "module": "components/chip/chip.component.js"
+            "name": "Checkbox",
+            "module": "components/checkbox/checkbox.component.js"
           }
         }
       ]
@@ -7860,13 +7860,47 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "preventScroll",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Prevent outside scrolling when element is shown.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
+              "default": "false",
+              "attribute": "prevent-scroll",
+              "reflects": true,
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "activatePreventScroll",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "PreventScrollMixin",
+                "module": "utils/mixins/PreventScrollMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "deactivatePreventScroll",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "PreventScrollMixin",
+                "module": "utils/mixins/PreventScrollMixin.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.",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
               "default": "false",
               "attribute": "focus-trap",
               "reflects": true,
@@ -7883,7 +7917,7 @@
                 "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.",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
               "attribute": "should-focus-trap-wrap",
               "reflects": true,
               "inheritedFrom": {
@@ -7892,14 +7926,17 @@
               }
             },
             {
-              "kind": "field",
-              "name": "enabledPreventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prevent outside scrolling when element is shown.",
-              "attribute": "enabledPreventScroll",
+              "kind": "method",
+              "name": "setIsFocusTrapActivated",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "isActivated",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "utils/mixins/FocusTrapMixin.js"
@@ -7909,7 +7946,7 @@
               "kind": "method",
               "name": "activateFocusTrap",
               "privacy": "public",
-              "description": "Activate the focus trap\nThis calculates the focusable elements within the component's shadow root",
+              "description": "Activate the focus trap",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "utils/mixins/FocusTrapMixin.js"
@@ -8167,7 +8204,7 @@
                   "description": "The set of focusable elements."
                 }
               ],
-              "description": "Recursively finds all focusable elements within the given root and its descendants.",
+              "description": "Recursively finds all focusable elements within the given root and its descendants.\n\nMake sure this is performant, as it will be called multiple times.",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "utils/mixins/FocusTrapMixin.js"
@@ -8176,7 +8213,7 @@
             {
               "kind": "method",
               "name": "setFocusableElements",
-              "privacy": "public",
+              "privacy": "private",
               "description": "Updates the list of focusable elements within the component's shadow root.",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
@@ -8432,28 +8469,13 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "preventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Prevent outside scrolling when popover show.",
-              "default": "false",
-              "attribute": "prevent-scroll",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "interactive",
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines whether the popover is interactive。",
+              "description": "Determines whether the popover is interactive.\nMake sure to set focusTrap to true to keep the focus inside the popover in case necessary.\nSetting interactive to true will not automatically set focusTrap!",
               "default": "false",
               "attribute": "interactive",
               "reflects": true,
@@ -8492,6 +8514,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "propagateEventOnEscape",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Propagates the event, when the escape key is pressed (only when pressed inside the popover)\nIf true, the escape key press close the popover and will propagate the keydown event.\nIf false, the escape key press will close the popover but will not propagate the keydown event.\n(set to false to prevent the event from bubbling up to the document).\n\nThis only works when `hideOnEscape` is true.",
+              "default": "false",
+              "attribute": "propagate-event-on-escape",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "hideOnBlur",
@@ -8753,7 +8790,7 @@
               "kind": "field",
               "name": "onEscapeKeydown",
               "privacy": "private",
-              "description": "Handles the escape keydown event to close the popover.",
+              "description": "Handles the escape keydown event to close the popover.\n\nThis method is attached to the document.",
               "parameters": [
                 {
                   "description": "The keyboard event.",
@@ -8857,16 +8894,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "handleCreatePopoverFirstUpdate",
-              "privacy": "private",
-              "description": "Sets the focusable elements inside the popover.",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "positionPopover",
@@ -8984,26 +9011,13 @@
                 "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.",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
               "fieldName": "shouldFocusTrapWrap",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "src/utils/mixins/FocusTrapMixin.ts"
               }
             },
-            {
-              "name": "enabledPreventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prevent outside scrolling when element is shown.",
-              "fieldName": "enabledPreventScroll",
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "src/utils/mixins/FocusTrapMixin.ts"
-              }
-            },
             {
               "name": "id",
               "type": {
@@ -9100,7 +9114,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Prevent outside scrolling when popover show.",
+              "description": "Prevent outside scrolling when popover is shown.",
               "default": "false",
               "fieldName": "preventScroll",
               "inheritedFrom": {
@@ -9113,7 +9127,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines whether the popover is interactive。",
+              "description": "Determines whether the popover is interactive.\nMake sure to set focusTrap to true to keep the focus inside the popover in case necessary.\nSetting interactive to true will not automatically set focusTrap!",
               "default": "false",
               "fieldName": "interactive",
               "inheritedFrom": {
@@ -9147,6 +9161,19 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "propagate-event-on-escape",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Propagates the event, when the escape key is pressed (only when pressed inside the popover)\nIf true, the escape key press close the popover and will propagate the keydown event.\nIf false, the escape key press will close the popover but will not propagate the keydown event.\n(set to false to prevent the event from bubbling up to the document).\n\nThis only works when `hideOnEscape` is true.",
+              "default": "false",
+              "fieldName": "propagateEventOnEscape",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "hide-on-blur",
               "type": {
@@ -9580,6 +9607,20 @@
               "attribute": "disable-aria-haspopup",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "focusTrap",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "description": "For now FocusTrap is always true as the dialog is a modal component only.\nThis means it will always trap focus within the dialog when it is open.",
+              "default": "true",
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "isOpenUpdated",
@@ -9604,16 +9645,33 @@
             },
             {
               "kind": "field",
-              "name": "focusTrap",
+              "name": "preventScroll",
               "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",
+              "description": "Prevent outside scrolling when element is shown.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "PreventScrollMixin",
+                "module": "utils/mixins/PreventScrollMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "activatePreventScroll",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "PreventScrollMixin",
+                "module": "utils/mixins/PreventScrollMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "deactivatePreventScroll",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "PreventScrollMixin",
+                "module": "utils/mixins/PreventScrollMixin.js"
               }
             },
             {
@@ -9623,7 +9681,7 @@
                 "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.",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
               "attribute": "should-focus-trap-wrap",
               "reflects": true,
               "inheritedFrom": {
@@ -9632,14 +9690,17 @@
               }
             },
             {
-              "kind": "field",
-              "name": "enabledPreventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prevent outside scrolling when element is shown.",
-              "attribute": "enabledPreventScroll",
+              "kind": "method",
+              "name": "setIsFocusTrapActivated",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "isActivated",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "utils/mixins/FocusTrapMixin.js"
@@ -9649,7 +9710,7 @@
               "kind": "method",
               "name": "activateFocusTrap",
               "privacy": "public",
-              "description": "Activate the focus trap\nThis calculates the focusable elements within the component's shadow root",
+              "description": "Activate the focus trap",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "utils/mixins/FocusTrapMixin.js"
@@ -9907,7 +9968,7 @@
                   "description": "The set of focusable elements."
                 }
               ],
-              "description": "Recursively finds all focusable elements within the given root and its descendants.",
+              "description": "Recursively finds all focusable elements within the given root and its descendants.\n\nMake sure this is performant, as it will be called multiple times.",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "utils/mixins/FocusTrapMixin.js"
@@ -9916,7 +9977,7 @@
             {
               "kind": "method",
               "name": "setFocusableElements",
-              "privacy": "public",
+              "privacy": "private",
               "description": "Updates the list of focusable elements within the component's shadow root.",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
@@ -10276,28 +10337,19 @@
                 "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.",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
               "fieldName": "shouldFocusTrapWrap",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "src/utils/mixins/FocusTrapMixin.ts"
               }
-            },
-            {
-              "name": "enabledPreventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prevent outside scrolling when element is shown.",
-              "fieldName": "enabledPreventScroll",
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "src/utils/mixins/FocusTrapMixin.ts"
-              }
             }
           ],
           "mixins": [
+            {
+              "name": "PreventScrollMixin",
+              "module": "/src/utils/mixins/PreventScrollMixin"
+            },
             {
               "name": "FocusTrapMixin",
               "module": "/src/utils/mixins/FocusTrapMixin"
@@ -18497,13 +18549,47 @@
                 "module": "utils/mixins/MenuMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "preventScroll",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Prevent outside scrolling when element is shown.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
+              "default": "false",
+              "attribute": "prevent-scroll",
+              "reflects": true,
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "activatePreventScroll",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "PreventScrollMixin",
+                "module": "utils/mixins/PreventScrollMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "deactivatePreventScroll",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "PreventScrollMixin",
+                "module": "utils/mixins/PreventScrollMixin.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.",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
               "default": "false",
               "attribute": "focus-trap",
               "reflects": true,
@@ -18520,7 +18606,7 @@
                 "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.",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
               "attribute": "should-focus-trap-wrap",
               "reflects": true,
               "inheritedFrom": {
@@ -18529,14 +18615,17 @@
               }
             },
             {
-              "kind": "field",
-              "name": "enabledPreventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prevent outside scrolling when element is shown.",
-              "attribute": "enabledPreventScroll",
+              "kind": "method",
+              "name": "setIsFocusTrapActivated",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "isActivated",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "utils/mixins/FocusTrapMixin.js"
@@ -18546,7 +18635,7 @@
               "kind": "method",
               "name": "activateFocusTrap",
               "privacy": "public",
-              "description": "Activate the focus trap\nThis calculates the focusable elements within the component's shadow root",
+              "description": "Activate the focus trap",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "utils/mixins/FocusTrapMixin.js"
@@ -18804,7 +18893,7 @@
                   "description": "The set of focusable elements."
                 }
               ],
-              "description": "Recursively finds all focusable elements within the given root and its descendants.",
+              "description": "Recursively finds all focusable elements within the given root and its descendants.\n\nMake sure this is performant, as it will be called multiple times.",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "utils/mixins/FocusTrapMixin.js"
@@ -18813,7 +18902,7 @@
             {
               "kind": "method",
               "name": "setFocusableElements",
-              "privacy": "public",
+              "privacy": "private",
               "description": "Updates the list of focusable elements within the component's shadow root.",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
@@ -19084,21 +19173,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "preventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Prevent outside scrolling when popover show.",
-              "default": "false",
-              "attribute": "prevent-scroll",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "showArrow",
@@ -19135,7 +19209,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines whether the popover is interactive。",
+              "description": "Determines whether the popover is interactive.\nMake sure to set focusTrap to true to keep the focus inside the popover in case necessary.\nSetting interactive to true will not automatically set focusTrap!",
               "default": "false",
               "attribute": "interactive",
               "reflects": true,
@@ -19174,6 +19248,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "propagateEventOnEscape",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Propagates the event, when the escape key is pressed (only when pressed inside the popover)\nIf true, the escape key press close the popover and will propagate the keydown event.\nIf false, the escape key press will close the popover but will not propagate the keydown event.\n(set to false to prevent the event from bubbling up to the document).\n\nThis only works when `hideOnEscape` is true.",
+              "default": "false",
+              "attribute": "propagate-event-on-escape",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "hideOnBlur",
@@ -19450,7 +19539,7 @@
               "kind": "field",
               "name": "onEscapeKeydown",
               "privacy": "private",
-              "description": "Handles the escape keydown event to close the popover.",
+              "description": "Handles the escape keydown event to close the popover.\n\nThis method is attached to the document.",
               "parameters": [
                 {
                   "description": "The keyboard event.",
@@ -19554,16 +19643,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "handleCreatePopoverFirstUpdate",
-              "privacy": "private",
-              "description": "Sets the focusable elements inside the popover.",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "positionPopover",
@@ -19617,26 +19696,13 @@
                 "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.",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
               "fieldName": "shouldFocusTrapWrap",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "src/utils/mixins/FocusTrapMixin.ts"
               }
             },
-            {
-              "name": "enabledPreventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prevent outside scrolling when element is shown.",
-              "fieldName": "enabledPreventScroll",
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "src/utils/mixins/FocusTrapMixin.ts"
-              }
-            },
             {
               "name": "id",
               "type": {
@@ -19746,7 +19812,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Prevent outside scrolling when popover show.",
+              "description": "Prevent outside scrolling when popover is shown.",
               "default": "false",
               "fieldName": "preventScroll",
               "inheritedFrom": {
@@ -19785,7 +19851,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines whether the popover is interactive。",
+              "description": "Determines whether the popover is interactive.\nMake sure to set focusTrap to true to keep the focus inside the popover in case necessary.\nSetting interactive to true will not automatically set focusTrap!",
               "default": "false",
               "fieldName": "interactive",
               "inheritedFrom": {
@@ -19819,6 +19885,19 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "propagate-event-on-escape",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Propagates the event, when the escape key is pressed (only when pressed inside the popover)\nIf true, the escape key press close the popover and will propagate the keydown event.\nIf false, the escape key press will close the popover but will not propagate the keydown event.\n(set to false to prevent the event from bubbling up to the document).\n\nThis only works when `hideOnEscape` is true.",
+              "default": "false",
+              "fieldName": "propagateEventOnEscape",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "hide-on-blur",
               "type": {
@@ -23024,10 +23103,15 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Prevent outside scrolling when popover show.",
+              "privacy": "protected",
+              "description": "Prevent outside scrolling when popover is shown.",
               "default": "false",
               "attribute": "prevent-scroll",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "PreventScrollMixin",
+                "module": "utils/mixins/PreventScrollMixin.js"
+              }
             },
             {
               "kind": "field",
@@ -23057,7 +23141,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines whether the popover is interactive。",
+              "description": "Determines whether the popover is interactive.\nMake sure to set focusTrap to true to keep the focus inside the popover in case necessary.\nSetting interactive to true will not automatically set focusTrap!",
               "default": "false",
               "attribute": "interactive",
               "reflects": true
@@ -23084,6 +23168,17 @@
               "attribute": "hide-on-escape",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "propagateEventOnEscape",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Propagates the event, when the escape key is pressed (only when pressed inside the popover)\nIf true, the escape key press close the popover and will propagate the keydown event.\nIf false, the escape key press will close the popover but will not propagate the keydown event.\n(set to false to prevent the event from bubbling up to the document).\n\nThis only works when `hideOnEscape` is true.",
+              "default": "false",
+              "attribute": "propagate-event-on-escape",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "hideOnBlur",
@@ -23284,7 +23379,7 @@
               "kind": "field",
               "name": "onEscapeKeydown",
               "privacy": "private",
-              "description": "Handles the escape keydown event to close the popover.",
+              "description": "Handles the escape keydown event to close the popover.\n\nThis method is attached to the document.",
               "parameters": [
                 {
                   "description": "The keyboard event.",
@@ -23356,12 +23451,6 @@
               "privacy": "public",
               "description": "Toggles the popover visibility."
             },
-            {
-              "kind": "method",
-              "name": "handleCreatePopoverFirstUpdate",
-              "privacy": "private",
-              "description": "Sets the focusable elements inside the popover."
-            },
             {
               "kind": "method",
               "name": "positionPopover",
@@ -23373,6 +23462,24 @@
               "name": "utils",
               "default": "new PopoverUtils(this)"
             },
+            {
+              "kind": "method",
+              "name": "activatePreventScroll",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "PreventScrollMixin",
+                "module": "utils/mixins/PreventScrollMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "deactivatePreventScroll",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "PreventScrollMixin",
+                "module": "utils/mixins/PreventScrollMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "shouldFocusTrapWrap",
@@ -23380,7 +23487,7 @@
                 "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.",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
               "attribute": "should-focus-trap-wrap",
               "reflects": true,
               "inheritedFrom": {
@@ -23389,14 +23496,17 @@
               }
             },
             {
-              "kind": "field",
-              "name": "enabledPreventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prevent outside scrolling when element is shown.",
-              "attribute": "enabledPreventScroll",
+              "kind": "method",
+              "name": "setIsFocusTrapActivated",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "isActivated",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "utils/mixins/FocusTrapMixin.js"
@@ -23406,7 +23516,7 @@
               "kind": "method",
               "name": "activateFocusTrap",
               "privacy": "public",
-              "description": "Activate the focus trap\nThis calculates the focusable elements within the component's shadow root",
+              "description": "Activate the focus trap",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "utils/mixins/FocusTrapMixin.js"
@@ -23664,7 +23774,7 @@
                   "description": "The set of focusable elements."
                 }
               ],
-              "description": "Recursively finds all focusable elements within the given root and its descendants.",
+              "description": "Recursively finds all focusable elements within the given root and its descendants.\n\nMake sure this is performant, as it will be called multiple times.",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "utils/mixins/FocusTrapMixin.js"
@@ -23673,7 +23783,7 @@
             {
               "kind": "method",
               "name": "setFocusableElements",
-              "privacy": "public",
+              "privacy": "private",
               "description": "Updates the list of focusable elements within the component's shadow root.",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
@@ -23940,7 +24050,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Prevent outside scrolling when popover show.",
+              "description": "Prevent outside scrolling when popover is shown.",
               "default": "false",
               "fieldName": "preventScroll"
             },
@@ -23967,7 +24077,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines whether the popover is interactive。",
+              "description": "Determines whether the popover is interactive.\nMake sure to set focusTrap to true to keep the focus inside the popover in case necessary.\nSetting interactive to true will not automatically set focusTrap!",
               "default": "false",
               "fieldName": "interactive"
             },
@@ -23989,6 +24099,15 @@
               "default": "false",
               "fieldName": "hideOnEscape"
             },
+            {
+              "name": "propagate-event-on-escape",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Propagates the event, when the escape key is pressed (only when pressed inside the popover)\nIf true, the escape key press close the popover and will propagate the keydown event.\nIf false, the escape key press will close the popover but will not propagate the keydown event.\n(set to false to prevent the event from bubbling up to the document).\n\nThis only works when `hideOnEscape` is true.",
+              "default": "false",
+              "fieldName": "propagateEventOnEscape"
+            },
             {
               "name": "hide-on-blur",
               "type": {
@@ -24121,28 +24240,19 @@
                 "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.",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
               "fieldName": "shouldFocusTrapWrap",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
                 "module": "src/utils/mixins/FocusTrapMixin.ts"
               }
-            },
-            {
-              "name": "enabledPreventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prevent outside scrolling when element is shown.",
-              "fieldName": "enabledPreventScroll",
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "src/utils/mixins/FocusTrapMixin.ts"
-              }
             }
           ],
           "mixins": [
+            {
+              "name": "PreventScrollMixin",
+              "module": "/src/utils/mixins/PreventScrollMixin"
+            },
             {
               "name": "FocusTrapMixin",
               "module": "/src/utils/mixins/FocusTrapMixin"
@@ -32729,6 +32839,40 @@
               },
               "description": "Updates the placement attribute if it is not a valid placement.\nDefault placement for toggle tip is top."
             },
+            {
+              "kind": "field",
+              "name": "preventScroll",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "description": "Prevent outside scrolling when element is shown.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
+              "default": "false",
+              "attribute": "prevent-scroll",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "activatePreventScroll",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "deactivatePreventScroll",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "focusTrap",
@@ -32736,7 +32880,7 @@
                 "text": "boolean"
               },
               "privacy": "protected",
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
               "default": "false",
               "attribute": "focus-trap",
               "reflects": true,
@@ -32752,7 +32896,7 @@
                 "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.",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
               "attribute": "should-focus-trap-wrap",
               "reflects": true,
               "inheritedFrom": {
@@ -32761,14 +32905,17 @@
               }
             },
             {
-              "kind": "field",
-              "name": "enabledPreventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prevent outside scrolling when element is shown.",
-              "attribute": "enabledPreventScroll",
+              "kind": "method",
+              "name": "setIsFocusTrapActivated",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "isActivated",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -32778,7 +32925,7 @@
               "kind": "method",
               "name": "activateFocusTrap",
               "privacy": "public",
-              "description": "Activate the focus trap\nThis calculates the focusable elements within the component's shadow root",
+              "description": "Activate the focus trap",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -33036,7 +33183,7 @@
                   "description": "The set of focusable elements."
                 }
               ],
-              "description": "Recursively finds all focusable elements within the given root and its descendants.",
+              "description": "Recursively finds all focusable elements within the given root and its descendants.\n\nMake sure this is performant, as it will be called multiple times.",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -33045,7 +33192,7 @@
             {
               "kind": "method",
               "name": "setFocusableElements",
-              "privacy": "public",
+              "privacy": "private",
               "description": "Updates the list of focusable elements within the component's shadow root.",
               "inheritedFrom": {
                 "name": "Popover",
@@ -33316,21 +33463,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "preventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Prevent outside scrolling when popover show.",
-              "default": "false",
-              "attribute": "prevent-scroll",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "showArrow",
@@ -33367,7 +33499,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines whether the popover is interactive。",
+              "description": "Determines whether the popover is interactive.\nMake sure to set focusTrap to true to keep the focus inside the popover in case necessary.\nSetting interactive to true will not automatically set focusTrap!",
               "default": "false",
               "attribute": "interactive",
               "reflects": true,
@@ -33406,6 +33538,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "propagateEventOnEscape",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Propagates the event, when the escape key is pressed (only when pressed inside the popover)\nIf true, the escape key press close the popover and will propagate the keydown event.\nIf false, the escape key press will close the popover but will not propagate the keydown event.\n(set to false to prevent the event from bubbling up to the document).\n\nThis only works when `hideOnEscape` is true.",
+              "default": "false",
+              "attribute": "propagate-event-on-escape",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "hideOnBlur",
@@ -33682,7 +33829,7 @@
               "kind": "field",
               "name": "onEscapeKeydown",
               "privacy": "private",
-              "description": "Handles the escape keydown event to close the popover.",
+              "description": "Handles the escape keydown event to close the popover.\n\nThis method is attached to the document.",
               "parameters": [
                 {
                   "description": "The keyboard event.",
@@ -33786,16 +33933,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "handleCreatePopoverFirstUpdate",
-              "privacy": "private",
-              "description": "Sets the focusable elements inside the popover.",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "positionPopover",
@@ -33869,26 +34006,13 @@
                 "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.",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
               "fieldName": "shouldFocusTrapWrap",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "src/components/popover/popover.component.ts"
               }
             },
-            {
-              "name": "enabledPreventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prevent outside scrolling when element is shown.",
-              "fieldName": "enabledPreventScroll",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
             {
               "name": "id",
               "type": {
@@ -33998,7 +34122,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Prevent outside scrolling when popover show.",
+              "description": "Prevent outside scrolling when popover is shown.",
               "default": "false",
               "fieldName": "preventScroll",
               "inheritedFrom": {
@@ -34037,7 +34161,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines whether the popover is interactive。",
+              "description": "Determines whether the popover is interactive.\nMake sure to set focusTrap to true to keep the focus inside the popover in case necessary.\nSetting interactive to true will not automatically set focusTrap!",
               "default": "false",
               "fieldName": "interactive",
               "inheritedFrom": {
@@ -34071,6 +34195,19 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "propagate-event-on-escape",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Propagates the event, when the escape key is pressed (only when pressed inside the popover)\nIf true, the escape key press close the popover and will propagate the keydown event.\nIf false, the escape key press will close the popover but will not propagate the keydown event.\n(set to false to prevent the event from bubbling up to the document).\n\nThis only works when `hideOnEscape` is true.",
+              "default": "false",
+              "fieldName": "propagateEventOnEscape",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "hide-on-blur",
               "type": {
@@ -34472,6 +34609,40 @@
               ],
               "description": "Updates the tooltip type attribute and sets the appropriate aria props on the trigger component."
             },
+            {
+              "kind": "field",
+              "name": "preventScroll",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "description": "Prevent outside scrolling when element is shown.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
+              "default": "false",
+              "attribute": "prevent-scroll",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "activatePreventScroll",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "deactivatePreventScroll",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "focusTrap",
@@ -34479,7 +34650,7 @@
                 "text": "boolean"
               },
               "privacy": "protected",
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
               "default": "false",
               "attribute": "focus-trap",
               "reflects": true,
@@ -34495,7 +34666,7 @@
                 "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.",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
               "attribute": "should-focus-trap-wrap",
               "reflects": true,
               "inheritedFrom": {
@@ -34504,14 +34675,17 @@
               }
             },
             {
-              "kind": "field",
-              "name": "enabledPreventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prevent outside scrolling when element is shown.",
-              "attribute": "enabledPreventScroll",
+              "kind": "method",
+              "name": "setIsFocusTrapActivated",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "isActivated",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -34521,7 +34695,7 @@
               "kind": "method",
               "name": "activateFocusTrap",
               "privacy": "public",
-              "description": "Activate the focus trap\nThis calculates the focusable elements within the component's shadow root",
+              "description": "Activate the focus trap",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -34779,7 +34953,7 @@
                   "description": "The set of focusable elements."
                 }
               ],
-              "description": "Recursively finds all focusable elements within the given root and its descendants.",
+              "description": "Recursively finds all focusable elements within the given root and its descendants.\n\nMake sure this is performant, as it will be called multiple times.",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -34788,7 +34962,7 @@
             {
               "kind": "method",
               "name": "setFocusableElements",
-              "privacy": "public",
+              "privacy": "private",
               "description": "Updates the list of focusable elements within the component's shadow root.",
               "inheritedFrom": {
                 "name": "Popover",
@@ -35059,21 +35233,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "preventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Prevent outside scrolling when popover show.",
-              "default": "false",
-              "attribute": "prevent-scroll",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "showArrow",
@@ -35110,7 +35269,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines whether the popover is interactive。",
+              "description": "Determines whether the popover is interactive.\nMake sure to set focusTrap to true to keep the focus inside the popover in case necessary.\nSetting interactive to true will not automatically set focusTrap!",
               "default": "false",
               "attribute": "interactive",
               "reflects": true,
@@ -35149,6 +35308,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "propagateEventOnEscape",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Propagates the event, when the escape key is pressed (only when pressed inside the popover)\nIf true, the escape key press close the popover and will propagate the keydown event.\nIf false, the escape key press will close the popover but will not propagate the keydown event.\n(set to false to prevent the event from bubbling up to the document).\n\nThis only works when `hideOnEscape` is true.",
+              "default": "false",
+              "attribute": "propagate-event-on-escape",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "hideOnBlur",
@@ -35425,7 +35599,7 @@
               "kind": "field",
               "name": "onEscapeKeydown",
               "privacy": "private",
-              "description": "Handles the escape keydown event to close the popover.",
+              "description": "Handles the escape keydown event to close the popover.\n\nThis method is attached to the document.",
               "parameters": [
                 {
                   "description": "The keyboard event.",
@@ -35529,16 +35703,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "handleCreatePopoverFirstUpdate",
-              "privacy": "private",
-              "description": "Sets the focusable elements inside the popover.",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "positionPopover",
@@ -35613,26 +35777,13 @@
                 "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.",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
               "fieldName": "shouldFocusTrapWrap",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "src/components/popover/popover.component.ts"
               }
             },
-            {
-              "name": "enabledPreventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prevent outside scrolling when element is shown.",
-              "fieldName": "enabledPreventScroll",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
             {
               "name": "id",
               "type": {
@@ -35742,7 +35893,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Prevent outside scrolling when popover show.",
+              "description": "Prevent outside scrolling when popover is shown.",
               "default": "false",
               "fieldName": "preventScroll",
               "inheritedFrom": {
@@ -35781,7 +35932,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines whether the popover is interactive。",
+              "description": "Determines whether the popover is interactive.\nMake sure to set focusTrap to true to keep the focus inside the popover in case necessary.\nSetting interactive to true will not automatically set focusTrap!",
               "default": "false",
               "fieldName": "interactive",
               "inheritedFrom": {
@@ -35815,6 +35966,19 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "propagate-event-on-escape",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Propagates the event, when the escape key is pressed (only when pressed inside the popover)\nIf true, the escape key press close the popover and will propagate the keydown event.\nIf false, the escape key press will close the popover but will not propagate the keydown event.\n(set to false to prevent the event from bubbling up to the document).\n\nThis only works when `hideOnEscape` is true.",
+              "default": "false",
+              "fieldName": "propagateEventOnEscape",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "hide-on-blur",
               "type": {
@@ -37237,13 +37401,6 @@
               },
               "privacy": "protected"
             },
-            {
-              "kind": "field",
-              "name": "enabledPreventScroll",
-              "type": {
-                "text": "boolean"
-              }
-            },
             {
               "kind": "method",
               "name": "setInitialFocus",
@@ -37279,6 +37436,24 @@
                   "text": "void"
                 }
               }
+            },
+            {
+              "kind": "method",
+              "name": "setIsFocusTrapActivated",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "isActivated",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
             }
           ]
         },
@@ -37294,8 +37469,7 @@
                 "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"
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nIMPLEMENT THIS IN YOUR COMPONENT."
             },
             {
               "kind": "field",
@@ -37304,25 +37478,28 @@
                 "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.",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
               "attribute": "should-focus-trap-wrap",
               "reflects": true
             },
             {
-              "kind": "field",
-              "name": "enabledPreventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prevent outside scrolling when element is shown.",
-              "attribute": "enabledPreventScroll"
+              "kind": "method",
+              "name": "setIsFocusTrapActivated",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "isActivated",
+                  "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"
+              "description": "Activate the focus trap"
             },
             {
               "kind": "method",
@@ -37536,12 +37713,12 @@
                   "description": "The set of focusable elements."
                 }
               ],
-              "description": "Recursively finds all focusable elements within the given root and its descendants."
+              "description": "Recursively finds all focusable elements within the given root and its descendants.\n\nMake sure this is performant, as it will be called multiple times."
             },
             {
               "kind": "method",
               "name": "setFocusableElements",
-              "privacy": "public",
+              "privacy": "private",
               "description": "Updates the list of focusable elements within the component's shadow root."
             },
             {
@@ -37683,17 +37860,8 @@
                 "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.",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
               "fieldName": "shouldFocusTrapWrap"
-            },
-            {
-              "name": "enabledPreventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prevent outside scrolling when element is shown.",
-              "fieldName": "enabledPreventScroll"
             }
           ],
           "parameters": [
@@ -38633,6 +38801,99 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "utils/mixins/PreventScrollMixin.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PreventScrollMixinInterface",
+          "members": [
+            {
+              "kind": "field",
+              "name": "preventScroll",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "activatePreventScroll",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "deactivatePreventScroll",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "PreventScrollMixin",
+          "members": [
+            {
+              "kind": "field",
+              "name": "preventScroll",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "description": "Prevent outside scrolling when element is shown.\n\nIMPLEMENT THIS IN YOUR COMPONENT."
+            },
+            {
+              "kind": "method",
+              "name": "activatePreventScroll",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "deactivatePreventScroll",
+              "privacy": "protected"
+            }
+          ],
+          "parameters": [
+            {
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PreventScrollMixinInterface",
+          "declaration": {
+            "name": "PreventScrollMixinInterface",
+            "module": "utils/mixins/PreventScrollMixin.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PreventScrollMixin",
+          "declaration": {
+            "name": "PreventScrollMixin",
+            "module": "utils/mixins/PreventScrollMixin.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "utils/mixins/TabIndexMixin.js",