@momentum-design/components 0.22.5 → 0.22.7

package/dist/custom-elements.json

@@ -2,250 +2,6 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "components/avatar/avatar.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
-          "name": "Avatar",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default background color.",
-              "name": "--mdc-avatar-default-background-color"
-            },
-            {
-              "description": "Allows customization of the default foreground color.",
-              "name": "--mdc-avatar-default-foreground-color"
-            },
-            {
-              "description": "Allows customization of the loading indicator background color.",
-              "name": "--mdc-avatar-loading-indicator-background-color"
-            },
-            {
-              "description": "Allows customization of the loading indicator foreground color.",
-              "name": "--mdc-avatar-loading-indicator-foreground-color"
-            },
-            {
-              "description": "Allows customization of the loading overlay background color.",
-              "name": "--mdc-avatar-loading-overlay-background-color"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "src",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
-              "attribute": "src",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "initials",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The initials to be displayed for the avatar.",
-              "attribute": "initials",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "presence",
-              "type": {
-                "text": "PresenceType | undefined"
-              },
-              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
-              "attribute": "presence",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "AvatarSize"
-              },
-              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
-              "default": "32",
-              "attribute": "size",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "counter",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
-              "attribute": "counter",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "isTyping",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Represents the typing indicator when the user is typing.",
-              "attribute": "is-typing",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "iconName",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "AvatarComponentMixin",
-              "module": "/src/utils/mixins/AvatarComponentMixin"
-            },
-            {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-avatar",
-          "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n */",
-          "customElement": true,
-          "attributes": [
-            {
-              "name": "src",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
-              "fieldName": "src",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
-            {
-              "name": "initials",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The initials to be displayed for the avatar.",
-              "fieldName": "initials",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
-            {
-              "name": "presence",
-              "type": {
-                "text": "PresenceType | undefined"
-              },
-              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
-              "fieldName": "presence",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "AvatarSize"
-              },
-              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
-              "default": "32",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
-            {
-              "name": "counter",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
-              "fieldName": "counter",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
-            {
-              "name": "is-typing",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Represents the typing indicator when the user is typing.",
-              "fieldName": "isTyping",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
-            {
-              "name": "icon-name",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Avatar",
-            "module": "components/avatar/avatar.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/avatarbutton/avatarbutton.component.js",
@@ -1121,20 +877,264 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bullet/bullet.component.js",
+      "path": "components/avatar/avatar.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",
+          "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
+          "name": "Avatar",
           "cssProperties": [
             {
-              "description": "background color of the bullet",
-              "name": "--mdc-bullet-background-color"
+              "description": "Allows customization of the default background color.",
+              "name": "--mdc-avatar-default-background-color"
             },
             {
-              "description": "small size value of the bullet",
-              "name": "--mdc-bullet-size-small"
+              "description": "Allows customization of the default foreground color.",
+              "name": "--mdc-avatar-default-foreground-color"
+            },
+            {
+              "description": "Allows customization of the loading indicator background color.",
+              "name": "--mdc-avatar-loading-indicator-background-color"
+            },
+            {
+              "description": "Allows customization of the loading indicator foreground color.",
+              "name": "--mdc-avatar-loading-indicator-foreground-color"
+            },
+            {
+              "description": "Allows customization of the loading overlay background color.",
+              "name": "--mdc-avatar-loading-overlay-background-color"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
+              "attribute": "src",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "initials",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The initials to be displayed for the avatar.",
+              "attribute": "initials",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "presence",
+              "type": {
+                "text": "PresenceType | undefined"
+              },
+              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
+              "attribute": "presence",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "AvatarSize"
+              },
+              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
+              "default": "32",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "counter",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
+              "attribute": "counter",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isTyping",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Represents the typing indicator when the user is typing.",
+              "attribute": "is-typing",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "iconName",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
+              "inheritedFrom": {
+                "name": "IconNameMixin",
+                "module": "utils/mixins/IconNameMixin.js"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "AvatarComponentMixin",
+              "module": "/src/utils/mixins/AvatarComponentMixin"
+            },
+            {
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-avatar",
+          "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n */",
+          "customElement": true,
+          "attributes": [
+            {
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
+              "fieldName": "src",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "initials",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The initials to be displayed for the avatar.",
+              "fieldName": "initials",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "presence",
+              "type": {
+                "text": "PresenceType | undefined"
+              },
+              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
+              "fieldName": "presence",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "AvatarSize"
+              },
+              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
+              "default": "32",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "counter",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
+              "fieldName": "counter",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "is-typing",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Represents the typing indicator when the user is typing.",
+              "fieldName": "isTyping",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "icon-name",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
+              "inheritedFrom": {
+                "name": "IconNameMixin",
+                "module": "src/utils/mixins/IconNameMixin.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Avatar",
+            "module": "components/avatar/avatar.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "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",
@@ -2119,19 +2119,39 @@
                   }
                 }
               ],
-              "description": "Toggles the state of the checkbox element.\nand dispatch the new event."
-            },
-            {
-              "kind": "field",
-              "name": "internals"
+              "description": "Toggles the state of the checkbox element.\nand dispatch the new change event."
             },
             {
-              "kind": "field",
-              "name": "helpTextType",
-              "type": {
-                "text": "ValidationType"
-              },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "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": "field",
+              "name": "internals"
+            },
+            {
+              "kind": "field",
+              "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,
               "default": "undefined as unknown",
@@ -2318,7 +2338,7 @@
           "events": [
             {
               "type": {
-                "text": "Event"
+                "text": "EventConstructor"
               }
             }
           ],
@@ -2484,6 +2504,112 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/checkboxgroup/checkboxgroup.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-checkboxgroup` component allows you to select multiple options from a predefined list.\nIt is commonly used in forms where multiple selections are required, such as preferences, filters, or categories.\n\nA checkbox group typically consists of multiple checkboxes grouped together,\neach representing a selectable option. You can check or uncheck options based on their preferences.",
+          "name": "Checkboxgroup",
+          "slots": [
+            {
+              "description": "This is a help text slot.",
+              "name": "help-text"
+            },
+            {
+              "description": "This is a default slot for children.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "headerText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text of the checkboxgroup.",
+              "attribute": "header-text"
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The KeyboardEvent"
+                }
+              ],
+              "description": "Handles the keydown event on the parent checkbox in the checkboxgroup.\nWhen the user presses the down arrow key, the focus is moved to the next checkbox in the checkboxgroup.\nWhen the user presses the up arrow key, the focus is moved to the previous checkbox in the checkboxgroup."
+            },
+            {
+              "kind": "method",
+              "name": "navigate",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "origin",
+                  "type": {
+                    "text": "EventTarget | null"
+                  },
+                  "description": "The element that triggered the event."
+                },
+                {
+                  "name": "direction",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The direction of navigation, either -1 or 1."
+                }
+              ],
+              "description": "Navigate to the next or previous checkbox in the checkboxgroup based on the given origin and direction."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "header-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text of the checkboxgroup.",
+              "fieldName": "headerText"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-checkboxgroup",
+          "jsDoc": "/**\n * `mdc-checkboxgroup` component allows you to select multiple options from a predefined list.\n * It is commonly used in forms where multiple selections are required, such as preferences, filters, or categories.\n *\n * A checkbox group typically consists of multiple checkboxes grouped together,\n * each representing a selectable option. You can check or uncheck options based on their preferences.\n *\n * @dependency mdc-text\n *\n * @tagname mdc-checkboxgroup\n *\n * @slot help-text - This is a help text slot.\n * @slot default - This is a default slot for children.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Checkboxgroup",
+            "module": "components/checkboxgroup/checkboxgroup.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/divider/divider.component.js",
@@ -3133,150 +3259,308 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/input/input.component.js",
+      "path": "components/iconprovider/iconprovider.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-input is a component that allows users to input text.\n It contains:\n- label field - describe the input field.\n- input field - contains the value\n- help text or validation message - displayed below the input field.\n- trailing button - it displays a clear the input field.\n- prefix text - displayed before the input field.\n- leading icon - displayed before the input field.\n- clear-aria-label - aria label for the trailing button.\n- all the attributes of the input field.",
-          "name": "Input",
-          "cssProperties": [
-            {
-              "description": "Border color for the input container when disabled",
-              "name": "--mdc-input-disabled-border-color"
-            },
-            {
-              "description": "Text color for the input field when disabled",
-              "name": "--mdc-input-disabled-text-color"
-            },
-            {
-              "description": "Background color for the input field when disabled",
-              "name": "--mdc-input-disabled-background-color"
-            },
-            {
-              "description": "Border color for the input container",
-              "name": "--mdc-input-border-color"
-            },
-            {
-              "description": "Text color for the input field",
-              "name": "--mdc-input-text-color"
-            },
-            {
-              "description": "Background color for the input field",
-              "name": "--mdc-input-background-color"
-            },
-            {
-              "description": "Background color for the selected text",
-              "name": "--mdc-input-selection-background-color"
-            },
-            {
-              "description": "Text color for the selected text",
-              "name": "--mdc-input-selection-text-color"
-            },
-            {
-              "description": "Text color for the help text",
-              "name": "--mdc-input-support-text-color"
-            },
-            {
-              "description": "Background color for the input field when hovered",
-              "name": "--mdc-input-hover-background-color"
-            },
-            {
-              "description": "Background color for the input field when focused",
-              "name": "--mdc-input-focused-background-color"
-            },
-            {
-              "description": "Border color for the input container when focused",
-              "name": "--mdc-input-focused-border-color"
-            },
-            {
-              "description": "Border color for the input container when error",
-              "name": "--mdc-input-error-border-color"
-            },
-            {
-              "description": "Border color for the input container when warning",
-              "name": "--mdc-input-warning-border-color"
-            },
-            {
-              "description": "Border color for the input container when success",
-              "name": "--mdc-input-success-border-color"
-            },
+          "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nBundling icons will be up to the consumer of this component, such\nthat only a url has to be passed in from which the icons will be\nfetched.\n\nIf `shouldCache` is set to true, the IconProvider will cache the icons\nin a Map to avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nKeep in mind that this cache is not persisted and will be lost when the\nIconProvider is removed from the DOM.",
+          "name": "IconProvider",
+          "slots": [
             {
-              "description": "Border color for the input container when primary",
-              "name": "--mdc-input-primary-border-color"
+              "description": "children",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The placeholder text that is displayed when the input field is empty.",
-              "attribute": "placeholder"
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "description": "Context object of the IconProvider, to be consumed by child components",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "url",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "required attribute of the input field.\nIf true, the consumer should indicate it on the label that the input field is required.",
-              "attribute": "required"
+              "description": "Url of where icons will be fetched from",
+              "attribute": "url"
             },
             {
               "kind": "field",
-              "name": "readonly",
+              "name": "fileExtension",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "readonly attribute of the input field. If true, the input field is read-only.",
-              "attribute": "readonly"
+              "description": "File extension of icons",
+              "default": "svg",
+              "attribute": "file-extension",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "prefixText",
+              "name": "lengthUnit",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
-              "attribute": "prefix-text"
+              "description": "Length unit used for sizing of icons",
+              "default": "em",
+              "attribute": "length-unit",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "leadingIcon",
+              "name": "size",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "number | undefined"
               },
-              "description": "The leading icon that is displayed before the input field.",
-              "attribute": "leading-icon"
+              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
+              "default": "1",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "trailingButton",
+              "name": "shouldCache",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
+              "description": "If the IconProvider should cache the icons\nin a Map to avoid fetching the same icon multiple times",
               "default": "false",
-              "description": "The trailing button when set to true, shows a clear button that clears the input field.",
-              "attribute": "trailing-button"
+              "attribute": "should-cache",
+              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "maxlength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The maximum number of characters that the input field can accept.",
-              "attribute": "maxlength"
+              "kind": "method",
+              "name": "updateValuesInContext",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "minlength",
-              "type": {
+              "kind": "method",
+              "name": "updateContext",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "url",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Url of where icons will be fetched from",
+              "fieldName": "url"
+            },
+            {
+              "name": "file-extension",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "File extension of icons",
+              "default": "svg",
+              "fieldName": "fileExtension"
+            },
+            {
+              "name": "length-unit",
+              "type": {
+                "text": "string"
+              },
+              "description": "Length unit used for sizing of icons",
+              "default": "em",
+              "fieldName": "lengthUnit"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
+              "default": "1",
+              "fieldName": "size"
+            },
+            {
+              "name": "should-cache",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If the IconProvider should cache the icons\nin a Map to avoid fetching the same icon multiple times",
+              "default": "false",
+              "fieldName": "shouldCache"
+            }
+          ],
+          "superclass": {
+            "name": "Provider",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-iconprovider",
+          "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Bundling icons will be up to the consumer of this component, such\n * that only a url has to be passed in from which the icons will be\n * fetched.\n *\n * If `shouldCache` is set to true, the IconProvider will cache the icons\n * in a Map to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * Keep in mind that this cache is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "IconProvider",
+            "module": "components/iconprovider/iconprovider.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/input/input.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-input is a component that allows users to input text.\n It contains:\n- label field - describe the input field.\n- input field - contains the value\n- help text or validation message - displayed below the input field.\n- trailing button - it displays a clear the input field.\n- prefix text - displayed before the input field.\n- leading icon - displayed before the input field.\n- clear-aria-label - aria label for the trailing button.\n- all the attributes of the input field.",
+          "name": "Input",
+          "cssProperties": [
+            {
+              "description": "Border color for the input container when disabled",
+              "name": "--mdc-input-disabled-border-color"
+            },
+            {
+              "description": "Text color for the input field when disabled",
+              "name": "--mdc-input-disabled-text-color"
+            },
+            {
+              "description": "Background color for the input field when disabled",
+              "name": "--mdc-input-disabled-background-color"
+            },
+            {
+              "description": "Border color for the input container",
+              "name": "--mdc-input-border-color"
+            },
+            {
+              "description": "Text color for the input field",
+              "name": "--mdc-input-text-color"
+            },
+            {
+              "description": "Background color for the input field",
+              "name": "--mdc-input-background-color"
+            },
+            {
+              "description": "Background color for the selected text",
+              "name": "--mdc-input-selection-background-color"
+            },
+            {
+              "description": "Text color for the selected text",
+              "name": "--mdc-input-selection-text-color"
+            },
+            {
+              "description": "Text color for the help text",
+              "name": "--mdc-input-support-text-color"
+            },
+            {
+              "description": "Background color for the input field when hovered",
+              "name": "--mdc-input-hover-background-color"
+            },
+            {
+              "description": "Background color for the input field when focused",
+              "name": "--mdc-input-focused-background-color"
+            },
+            {
+              "description": "Border color for the input container when focused",
+              "name": "--mdc-input-focused-border-color"
+            },
+            {
+              "description": "Border color for the input container when error",
+              "name": "--mdc-input-error-border-color"
+            },
+            {
+              "description": "Border color for the input container when warning",
+              "name": "--mdc-input-warning-border-color"
+            },
+            {
+              "description": "Border color for the input container when success",
+              "name": "--mdc-input-success-border-color"
+            },
+            {
+              "description": "Border color for the input container when primary",
+              "name": "--mdc-input-primary-border-color"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The placeholder text that is displayed when the input field is empty.",
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "required attribute of the input field.\nIf true, the consumer should indicate it on the label that the input field is required.",
+              "attribute": "required"
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "readonly attribute of the input field. If true, the input field is read-only.",
+              "attribute": "readonly"
+            },
+            {
+              "kind": "field",
+              "name": "prefixText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
+              "attribute": "prefix-text"
+            },
+            {
+              "kind": "field",
+              "name": "leadingIcon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The leading icon that is displayed before the input field.",
+              "attribute": "leading-icon"
+            },
+            {
+              "kind": "field",
+              "name": "trailingButton",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The trailing button when set to true, shows a clear button that clears the input field.",
+              "attribute": "trailing-button"
+            },
+            {
+              "kind": "field",
+              "name": "maxlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The maximum number of characters that the input field can accept.",
+              "attribute": "maxlength"
+            },
+            {
+              "kind": "field",
+              "name": "minlength",
+              "type": {
                 "text": "number | undefined"
               },
               "description": "The minimum number of characters that the input field can accept.",
@@ -4262,148 +4546,109 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/iconprovider/iconprovider.component.js",
+      "path": "components/modalcontainer/modalcontainer.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nBundling icons will be up to the consumer of this component, such\nthat only a url has to be passed in from which the icons will be\nfetched.\n\nIf `shouldCache` is set to true, the IconProvider will cache the icons\nin a Map to avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nKeep in mind that this cache is not persisted and will be lost when the\nIconProvider is removed from the DOM.",
-          "name": "IconProvider",
-          "slots": [
+          "description": "The `mdc-modalcontainer` component is an element used to\ndisplay a modal container that can further be used in popover.",
+          "name": "Modalcontainer",
+          "cssProperties": [
             {
-              "description": "children",
-              "name": ""
-            }
-          ],
-          "members": [
+              "description": "primary background color of the modalcontainer",
+              "name": "--mdc-modalcontainer-primary-background-color"
+            },
             {
-              "kind": "field",
-              "name": "Context",
-              "privacy": "public",
-              "static": true,
-              "description": "Context object of the IconProvider, to be consumed by child components",
-              "readonly": true
+              "description": "border color of the modalcontainer",
+              "name": "--mdc-modalcontainer-border-color"
             },
             {
-              "kind": "field",
-              "name": "url",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Url of where icons will be fetched from",
-              "attribute": "url"
+              "description": "inverted background color of the modalcontainer",
+              "name": "--mdc-modalcontainer-inverted-background-color"
             },
             {
-              "kind": "field",
-              "name": "fileExtension",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "File extension of icons",
-              "default": "svg",
-              "attribute": "file-extension",
-              "reflects": true
+              "description": "inverted border color of the modalcontainer",
+              "name": "--mdc-modalcontainer-inverted-border-color"
             },
+            {
+              "description": "inverted text color of the modalcontainer",
+              "name": "--mdc-modalcontainer-inverted-text-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for modal container",
+              "name": ""
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "lengthUnit",
+              "name": "color",
               "type": {
-                "text": "string"
+                "text": "ModalContainerColor"
               },
-              "description": "Length unit used for sizing of icons",
-              "default": "em",
-              "attribute": "length-unit",
+              "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
+              "default": "tonal",
+              "attribute": "color",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "elevation",
               "type": {
-                "text": "number | undefined"
+                "text": "ModalContainerElevation"
               },
-              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
-              "default": "1",
-              "attribute": "size",
+              "description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
+              "default": "0",
+              "attribute": "elevation",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "shouldCache",
+              "name": "role",
               "type": {
-                "text": "boolean | undefined"
+                "text": "ModalContainerRole"
               },
-              "description": "If the IconProvider should cache the icons\nin a Map to avoid fetching the same icon multiple times",
-              "default": "false",
-              "attribute": "should-cache",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "updateValuesInContext",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "updateContext",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "description": "Role of the modalcontainer",
+              "default": "dialog",
+              "attribute": "role"
             }
           ],
           "attributes": [
             {
-              "name": "url",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Url of where icons will be fetched from",
-              "fieldName": "url"
-            },
-            {
-              "name": "file-extension",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "File extension of icons",
-              "default": "svg",
-              "fieldName": "fileExtension"
-            },
-            {
-              "name": "length-unit",
+              "name": "color",
               "type": {
-                "text": "string"
+                "text": "ModalContainerColor"
               },
-              "description": "Length unit used for sizing of icons",
-              "default": "em",
-              "fieldName": "lengthUnit"
+              "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
+              "default": "tonal",
+              "fieldName": "color"
             },
             {
-              "name": "size",
+              "name": "elevation",
               "type": {
-                "text": "number | undefined"
+                "text": "ModalContainerElevation"
               },
-              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
-              "default": "1",
-              "fieldName": "size"
+              "description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
+              "default": "0",
+              "fieldName": "elevation"
             },
             {
-              "name": "should-cache",
+              "name": "role",
               "type": {
-                "text": "boolean | undefined"
+                "text": "ModalContainerRole"
               },
-              "description": "If the IconProvider should cache the icons\nin a Map to avoid fetching the same icon multiple times",
-              "default": "false",
-              "fieldName": "shouldCache"
+              "description": "Role of the modalcontainer",
+              "default": "dialog",
+              "fieldName": "role"
             }
           ],
           "superclass": {
-            "name": "Provider",
+            "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-iconprovider",
-          "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Bundling icons will be up to the consumer of this component, such\n * that only a url has to be passed in from which the icons will be\n * fetched.\n *\n * If `shouldCache` is set to true, the IconProvider will cache the icons\n * in a Map to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * Keep in mind that this cache is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
+          "tagName": "mdc-modalcontainer",
+          "jsDoc": "/**\n * The `mdc-modalcontainer` component is an element used to\n * display a modal container that can further be used in popover.\n *\n * @tagname mdc-modalcontainer\n *\n * @cssproperty --mdc-modalcontainer-primary-background-color - primary background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-border-color - border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-background-color - inverted background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-border-color - inverted border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-text-color - inverted text color of the modalcontainer\n *\n * @slot - Default slot for modal container\n */",
           "customElement": true
         }
       ],
@@ -4412,8 +4657,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "IconProvider",
-            "module": "components/iconprovider/iconprovider.component.js"
+            "name": "Modalcontainer",
+            "module": "components/modalcontainer/modalcontainer.component.js"
           }
         }
       ]
@@ -4588,125 +4833,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/modalcontainer/modalcontainer.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-modalcontainer` component is an element used to\ndisplay a modal container that can further be used in popover.",
-          "name": "Modalcontainer",
-          "cssProperties": [
-            {
-              "description": "primary background color of the modalcontainer",
-              "name": "--mdc-modalcontainer-primary-background-color"
-            },
-            {
-              "description": "border color of the modalcontainer",
-              "name": "--mdc-modalcontainer-border-color"
-            },
-            {
-              "description": "inverted background color of the modalcontainer",
-              "name": "--mdc-modalcontainer-inverted-background-color"
-            },
-            {
-              "description": "inverted border color of the modalcontainer",
-              "name": "--mdc-modalcontainer-inverted-border-color"
-            },
-            {
-              "description": "inverted text color of the modalcontainer",
-              "name": "--mdc-modalcontainer-inverted-text-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Default slot for modal container",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "ModalContainerColor"
-              },
-              "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
-              "default": "tonal",
-              "attribute": "color",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "elevation",
-              "type": {
-                "text": "ModalContainerElevation"
-              },
-              "description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
-              "default": "0",
-              "attribute": "elevation",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "role",
-              "type": {
-                "text": "ModalContainerRole"
-              },
-              "description": "Role of the modalcontainer",
-              "default": "dialog",
-              "attribute": "role"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "color",
-              "type": {
-                "text": "ModalContainerColor"
-              },
-              "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
-              "default": "tonal",
-              "fieldName": "color"
-            },
-            {
-              "name": "elevation",
-              "type": {
-                "text": "ModalContainerElevation"
-              },
-              "description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
-              "default": "0",
-              "fieldName": "elevation"
-            },
-            {
-              "name": "role",
-              "type": {
-                "text": "ModalContainerRole"
-              },
-              "description": "Role of the modalcontainer",
-              "default": "dialog",
-              "fieldName": "role"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-modalcontainer",
-          "jsDoc": "/**\n * The `mdc-modalcontainer` component is an element used to\n * display a modal container that can further be used in popover.\n *\n * @tagname mdc-modalcontainer\n *\n * @cssproperty --mdc-modalcontainer-primary-background-color - primary background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-border-color - border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-background-color - inverted background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-border-color - inverted border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-text-color - inverted text color of the modalcontainer\n *\n * @slot - Default slot for modal container\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Modalcontainer",
-            "module": "components/modalcontainer/modalcontainer.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/radio/radio.component.js",