@momentum-design/components 0.92.2 → 0.92.4

package/dist/custom-elements.json

@@ -12178,6 +12178,202 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/iconprovider/iconprovider.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\nAttribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.\n\nIf `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\nIconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIconProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
+          "name": "IconProvider",
+          "slots": [
+            {
+              "description": "children",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "description": "Context object of the IconProvider, to be consumed by child components",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "iconSet",
+              "type": {
+                "text": "IconSet | undefined"
+              },
+              "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
+              "default": "momentum-icons",
+              "attribute": "icon-set",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "url",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
+              "attribute": "url"
+            },
+            {
+              "kind": "field",
+              "name": "fileExtension",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
+              "default": "svg",
+              "attribute": "file-extension",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "lengthUnit",
+              "type": {
+                "text": "string"
+              },
+              "description": "Length unit used for sizing of icons",
+              "default": "em",
+              "attribute": "length-unit",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "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",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "cacheStrategy",
+              "type": {
+                "text": "CacheStrategy | undefined"
+              },
+              "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
+              "default": "undefined",
+              "attribute": "cache-strategy"
+            },
+            {
+              "kind": "field",
+              "name": "cacheName",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
+              "default": "undefined",
+              "attribute": "cache-name"
+            },
+            {
+              "kind": "method",
+              "name": "updateValuesInContext",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updateContext",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "icon-set",
+              "type": {
+                "text": "IconSet | undefined"
+              },
+              "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
+              "default": "momentum-icons",
+              "fieldName": "iconSet"
+            },
+            {
+              "name": "url",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
+              "fieldName": "url"
+            },
+            {
+              "name": "file-extension",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for 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": "cache-strategy",
+              "type": {
+                "text": "CacheStrategy | undefined"
+              },
+              "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
+              "default": "undefined",
+              "fieldName": "cacheStrategy"
+            },
+            {
+              "name": "cache-name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
+              "default": "undefined",
+              "fieldName": "cacheName"
+            }
+          ],
+          "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 * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\n * If `momentum-icons` is selected, the icons will be fetched from the\n * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-designs` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-icons` is selected, the icons will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the icons will be fetched and\n * the consumer needs to make sure to bundle the icons in the application.\n *\n * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\n * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\n * 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 * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\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/icon/icon.component.js",
@@ -12426,202 +12622,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/iconprovider/iconprovider.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\nAttribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.\n\nIf `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\nIconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIconProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
-          "name": "IconProvider",
-          "slots": [
-            {
-              "description": "children",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "Context",
-              "privacy": "public",
-              "static": true,
-              "description": "Context object of the IconProvider, to be consumed by child components",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "iconSet",
-              "type": {
-                "text": "IconSet | undefined"
-              },
-              "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
-              "default": "momentum-icons",
-              "attribute": "icon-set",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "url",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
-              "attribute": "url"
-            },
-            {
-              "kind": "field",
-              "name": "fileExtension",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
-              "default": "svg",
-              "attribute": "file-extension",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "lengthUnit",
-              "type": {
-                "text": "string"
-              },
-              "description": "Length unit used for sizing of icons",
-              "default": "em",
-              "attribute": "length-unit",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "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",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "cacheStrategy",
-              "type": {
-                "text": "CacheStrategy | undefined"
-              },
-              "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
-              "default": "undefined",
-              "attribute": "cache-strategy"
-            },
-            {
-              "kind": "field",
-              "name": "cacheName",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
-              "default": "undefined",
-              "attribute": "cache-name"
-            },
-            {
-              "kind": "method",
-              "name": "updateValuesInContext",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "updateContext",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "icon-set",
-              "type": {
-                "text": "IconSet | undefined"
-              },
-              "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
-              "default": "momentum-icons",
-              "fieldName": "iconSet"
-            },
-            {
-              "name": "url",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
-              "fieldName": "url"
-            },
-            {
-              "name": "file-extension",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for 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": "cache-strategy",
-              "type": {
-                "text": "CacheStrategy | undefined"
-              },
-              "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
-              "default": "undefined",
-              "fieldName": "cacheStrategy"
-            },
-            {
-              "name": "cache-name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
-              "default": "undefined",
-              "fieldName": "cacheName"
-            }
-          ],
-          "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 * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\n * If `momentum-icons` is selected, the icons will be fetched from the\n * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-designs` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-icons` is selected, the icons will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the icons will be fetched and\n * the consumer needs to make sure to bundle the icons in the application.\n *\n * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\n * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\n * 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 * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\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",
@@ -15444,6 +15444,13 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "menusections",
+              "type": {
+                "text": "Array<HTMLElement>"
+              }
+            },
             {
               "kind": "field",
               "name": "menuItems",
@@ -20475,6 +20482,14 @@
               "attribute": "show-divider",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "dividerVariant",
+              "description": "The variant of the divider.\nCan be set to 'solid' or 'gradient'.\n\nKeep 'solid' if used in MenuPopovers, as it is the default style.",
+              "default": "'solid'",
+              "attribute": "divider-variant",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "renderHeader",
@@ -20523,6 +20538,12 @@
               "default": "false",
               "description": "Whether to show a divider below the section header.\nThis is useful for visually separating sections in the menu.",
               "fieldName": "showDivider"
+            },
+            {
+              "name": "divider-variant",
+              "description": "The variant of the divider.\nCan be set to 'solid' or 'gradient'.\n\nKeep 'solid' if used in MenuPopovers, as it is the default style.",
+              "default": "'solid'",
+              "fieldName": "dividerVariant"
             }
           ],
           "superclass": {
@@ -29311,7 +29332,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\nIt is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\nThe component ensures accessibility and usability while handling various use cases,\nincluding long text truncation with tooltip support.\n\nTo set a default option, use the `selected` attribute on the `mdc-option` element.",
+          "description": "The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\nIt is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\nThe component ensures accessibility and usability while handling various use cases,\nincluding long text truncation with tooltip support.\n\nTo set a default option, use the `selected` attribute on the `mdc-option` element.\n\n**Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.",
           "name": "Select",
           "slots": [
             {
@@ -29350,30 +29371,36 @@
               "attribute": "height"
             },
             {
-              "kind": "method",
-              "name": "getAllValidOptions",
-              "privacy": "private",
-              "description": "A helper function which returns a flattened array of all valid options from the assigned slot.\nIt takes care of the edge cases where the option is either a direct child or a\nchild of an option group."
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "Placement"
+              },
+              "description": "The placeholder text which will be shown on the text if provided.",
+              "attribute": "placement",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "softDisabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the select is soft disabled.\nWhen set to `true`, the select appears visually disabled but still allows\nfocus.",
+              "default": "undefined",
+              "attribute": "soft-disabled"
             },
             {
               "kind": "method",
-              "name": "handlePopoverOpen",
+              "name": "modifyListBoxWrapper",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "description": "Modifies the listbox wrapper to ensure it has the correct attributes\nand IDs for accessibility.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers,\nthis an be removed and mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them."
             },
             {
               "kind": "method",
-              "name": "handlePopoverClose",
+              "name": "getAllValidOptions",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "description": "A helper function which returns a flattened array of all valid options from within the slotted listbox.\nIt takes care of the edge cases where the option is either a direct child or a\nchild of an option group."
             },
             {
               "kind": "method",
@@ -29494,7 +29521,25 @@
             },
             {
               "kind": "method",
-              "name": "handlePopoverOnClose",
+              "name": "handleClickCombobox",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleKeydownCombobox",
               "privacy": "private",
               "return": {
                 "type": {
@@ -29551,49 +29596,20 @@
                 },
                 {
                   "name": "currentIndex",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The current index of the focused option."
-                },
-                {
-                  "name": "optionsLength",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The total number of options."
-                }
-              ],
-              "description": "Calculates the new index based on the pressed navigation key.\nSupports ArrowUp, ArrowDown, PageUp, and PageDown keys for navigating options.\n- ArrowDown: Moves focus to the next option, if available.\n- ArrowUp: Moves focus to the previous option, if available.\n- PageDown: Moves focus 10 options down or to the last option.\n- PageUp: Moves focus 10 options up or to the first option."
-            },
-            {
-              "kind": "method",
-              "name": "updateActivedescendant",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The current index of the focused option."
+                },
                 {
-                  "name": "target",
-                  "optional": true,
+                  "name": "optionsLength",
                   "type": {
-                    "text": "EventTarget | null"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "resetActivedescendant",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
+                    "text": "number"
+                  },
+                  "description": "The total number of options."
                 }
-              }
+              ],
+              "description": "Calculates the new index based on the pressed navigation key.\nSupports ArrowUp, ArrowDown, PageUp, and PageDown keys for navigating options.\n- ArrowDown: Moves focus to the next option, if available.\n- ArrowUp: Moves focus to the previous option, if available.\n- PageDown: Moves focus 10 options down or to the last option.\n- PageUp: Moves focus 10 options up or to the first option."
             },
             {
               "kind": "method",
@@ -29635,36 +29651,13 @@
             },
             {
               "kind": "method",
-              "name": "getNativeSelect",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Generates the native select element.\nThe native select element is not rendered directly and is not visible on the UI.\nIt's rendered only on the DOM for accessibility purposes.\nInstead, the overlay uses the native select element to generate the list of options."
-            },
-            {
-              "kind": "method",
-              "name": "getOptionsContentFromSlot",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "This method maps over all valid options and constructs their corresponding\nHTML `<option>` elements. The attributes such as `value`, `label`, `disabled`,\nand `selected` are extracted from the respective option elements.\nIf the attribute is not present, a default value or fallback is used.\nThe content of each `<option>` is set to the text content of the option element."
-            },
-            {
-              "kind": "method",
-              "name": "getPopoverContent",
+              "name": "handleOnChange",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "TemplateResult | typeof nothing"
+                  "text": "void"
                 }
-              },
-              "description": "Generates the content for the popover associated with the select component.\nIf the component is disabled or readonly, returns `nothing`.\nOtherwise, returns a `TemplateResult` that renders a popover with various configurations\nsuch as visibility, interaction, and event handlers.\nThe popover acts as a dropdown list with options, allowing user interaction."
+              }
             },
             {
               "kind": "field",
@@ -30046,6 +30039,23 @@
               "description": "height attribute of the select field. If set,\nthen a scroll bar will be visible when there more options than the adjusted height.",
               "fieldName": "height"
             },
+            {
+              "name": "placement",
+              "type": {
+                "text": "Placement"
+              },
+              "description": "The placeholder text which will be shown on the text if provided.",
+              "fieldName": "placement"
+            },
+            {
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the select is soft disabled.\nWhen set to `true`, the select appears visually disabled but still allows\nfocus.",
+              "default": "undefined",
+              "fieldName": "softDisabled"
+            },
             {
               "name": "name",
               "type": {
@@ -30225,7 +30235,7 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-select",
-          "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * The component ensures accessibility and usability while handling various use cases,\n * including long text truncation with tooltip support.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n */",
+          "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * The component ensures accessibility and usability while handling various use cases,\n * including long text truncation with tooltip support.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n */",
           "customElement": true
         }
       ],
@@ -30240,6 +30250,46 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/selectlistbox/selectlistbox.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Selectlistbox component as Light DOM component to act as a simple wrapper\nfor mdc-option components to ensure accessibility and proper role assignment.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\nand mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them.",
+          "name": "Selectlistbox",
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot, which can be used to insert mdc-option components.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "role"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-selectlistbox",
+          "jsDoc": "/**\n * Selectlistbox component as Light DOM component to act as a simple wrapper\n * for mdc-option components to ensure accessibility and proper role assignment.\n *\n * Once [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\n * and mdc-option can be used directly in the select component with a listbox in a different\n * shadow root and aria-owns attribute to connect them.\n *\n * @tagname mdc-selectlistbox\n *\n * @slot default - This is a default/unnamed slot, which can be used to insert mdc-option components.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Selectlistbox",
+            "module": "components/selectlistbox/selectlistbox.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/sidenavigation/sidenavigation.component.js",
@@ -30796,44 +30846,218 @@
           "name": "StaticRadio",
           "cssProperties": [
             {
-              "description": "size of the inner circle",
-              "name": "--mdc-staticradio-inner-circle-size"
+              "description": "size of the inner circle",
+              "name": "--mdc-staticradio-inner-circle-size"
+            },
+            {
+              "description": "color of the label when disabled",
+              "name": "--mdc-staticradio-text-disabled-color"
+            },
+            {
+              "description": "color of the radio button border when normal",
+              "name": "--mdc-staticradio-normal-border-color"
+            },
+            {
+              "description": "color of the radio button border when disabled",
+              "name": "--mdc-staticradio-disabled-border-color"
+            },
+            {
+              "description": "background color of the inner circle when normal",
+              "name": "--mdc-staticradio-inner-circle-normal-background"
+            },
+            {
+              "description": "background color of the inner circle when disabled",
+              "name": "--mdc-staticradio-inner-circle-disabled-background"
+            },
+            {
+              "description": "color of the radio button when inactive",
+              "name": "--mdc-staticradio-control-inactive-color"
+            },
+            {
+              "description": "background color of the radio button when inactive and disabled",
+              "name": "--mdc-staticradio-control-inactive-disabled-background"
+            },
+            {
+              "description": "color of the radio button when active",
+              "name": "--mdc-staticradio-control-active-color"
+            },
+            {
+              "description": "background color of the radio button when active and disabled",
+              "name": "--mdc-staticradio-control-active-disabled-background"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the radio is selected or unselected.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the radio is read-only.",
+              "attribute": "readonly",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the radio is selected or unselected.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the radio is read-only.",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-staticradio",
+          "jsDoc": "/**\n * This is a decorative component that is styled to look as a radio.\n * It has 2 properties - checked and disabled.\n *\n * We are using the same styling that has been created for the `mdc-radio` component.\n *\n * @tagname mdc-staticradio\n *\n * @cssproperty --mdc-staticradio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-staticradio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-staticradio-normal-border-color - color of the radio button border when normal\n * @cssproperty --mdc-staticradio-disabled-border-color - color of the radio button border when disabled\n * @cssproperty --mdc-staticradio-inner-circle-normal-background - background color of the inner circle when normal\n * @cssproperty --mdc-staticradio-inner-circle-disabled-background - background color of the inner circle when disabled\n * @cssproperty --mdc-staticradio-control-inactive-color - color of the radio button when inactive\n * @cssproperty --mdc-staticradio-control-inactive-disabled-background - background color of the radio button when\n *  inactive and disabled\n * @cssproperty --mdc-staticradio-control-active-color - color of the radio button when active\n * @cssproperty --mdc-staticradio-control-active-disabled-background - background color of the radio button\n *  when active and disabled\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "StaticRadio",
+            "module": "components/staticradio/staticradio.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/statictoggle/statictoggle.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "This is a decorative component that is styled to look as a toggle. <br/>\nIt has 3 properties - checked, size and disabled. <br/>\nWe are using the same styling that has been created for the `mdc-toggle` component.",
+          "name": "StaticToggle",
+          "cssProperties": [
+            {
+              "description": "Width of the toggle",
+              "name": "--mdc-statictoggle-width"
+            },
+            {
+              "description": "Height of the toggle",
+              "name": "--mdc-statictoggle-height"
+            },
+            {
+              "description": "Width of the toggle when it's size is compact",
+              "name": "--mdc-statictoggle-width-compact"
+            },
+            {
+              "description": "Height of the toggle when it's size is compact",
+              "name": "--mdc-statictoggle-height-compact"
+            },
+            {
+              "description": "Border radius of the toggle",
+              "name": "--mdc-statictoggle-border-radius"
             },
             {
-              "description": "color of the label when disabled",
-              "name": "--mdc-staticradio-text-disabled-color"
+              "description": "Border radius of the toggle when it's size is compact",
+              "name": "--mdc-statictoggle-border-radius-compact"
             },
             {
-              "description": "color of the radio button border when normal",
-              "name": "--mdc-staticradio-normal-border-color"
+              "description": "Border of the toggle",
+              "name": "--mdc-statictoggle-border"
             },
             {
-              "description": "color of the radio button border when disabled",
-              "name": "--mdc-staticradio-disabled-border-color"
+              "description": "Background color of the inactive toggle in rest state",
+              "name": "--mdc-statictoggle-inactive-rest-color"
             },
             {
-              "description": "background color of the inner circle when normal",
-              "name": "--mdc-staticradio-inner-circle-normal-background"
+              "description": "Background color of the inactive toggle in disabled state",
+              "name": "--mdc-statictoggle-inactive-disabled-color"
             },
             {
-              "description": "background color of the inner circle when disabled",
-              "name": "--mdc-staticradio-inner-circle-disabled-background"
+              "description": "Background color of the active toggle in rest state",
+              "name": "--mdc-statictoggle-active-rest-color"
             },
             {
-              "description": "color of the radio button when inactive",
-              "name": "--mdc-staticradio-control-inactive-color"
+              "description": "Background color of the active toggle in disabled state",
+              "name": "--mdc-statictoggle-active-disabled-color"
             },
             {
-              "description": "background color of the radio button when inactive and disabled",
-              "name": "--mdc-staticradio-control-inactive-disabled-background"
+              "description": "Color of the icon in normal state",
+              "name": "--mdc-statictoggle-icon-color-normal"
             },
             {
-              "description": "color of the radio button when active",
-              "name": "--mdc-staticradio-control-active-color"
+              "description": "Color of the icon in disabled state",
+              "name": "--mdc-statictoggle-icon-color-disabled"
             },
             {
-              "description": "background color of the radio button when active and disabled",
-              "name": "--mdc-staticradio-control-active-disabled-background"
+              "description": "Background color of the icon in normal state",
+              "name": "--mdc-statictoggle-icon-background-color-normal"
+            },
+            {
+              "description": "Background color of the icon in disabled state",
+              "name": "--mdc-statictoggle-icon-background-color-disabled"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot",
+              "name": "default"
             }
           ],
           "members": [
@@ -30844,19 +31068,19 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
+              "description": "Determines whether the toggle is active or inactive.",
               "attribute": "checked",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "readonly",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "ToggleSize"
               },
-              "default": "false",
-              "description": "Determines whether the radio is read-only.",
-              "attribute": "readonly",
+              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "default": "default",
+              "attribute": "size",
               "reflects": true
             },
             {
@@ -30882,17 +31106,17 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
+              "description": "Determines whether the toggle is active or inactive.",
               "fieldName": "checked"
             },
             {
-              "name": "readonly",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "ToggleSize"
               },
-              "default": "false",
-              "description": "Determines whether the radio is read-only.",
-              "fieldName": "readonly"
+              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "default": "default",
+              "fieldName": "size"
             },
             {
               "name": "disabled",
@@ -30918,8 +31142,8 @@
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-staticradio",
-          "jsDoc": "/**\n * This is a decorative component that is styled to look as a radio.\n * It has 2 properties - checked and disabled.\n *\n * We are using the same styling that has been created for the `mdc-radio` component.\n *\n * @tagname mdc-staticradio\n *\n * @cssproperty --mdc-staticradio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-staticradio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-staticradio-normal-border-color - color of the radio button border when normal\n * @cssproperty --mdc-staticradio-disabled-border-color - color of the radio button border when disabled\n * @cssproperty --mdc-staticradio-inner-circle-normal-background - background color of the inner circle when normal\n * @cssproperty --mdc-staticradio-inner-circle-disabled-background - background color of the inner circle when disabled\n * @cssproperty --mdc-staticradio-control-inactive-color - color of the radio button when inactive\n * @cssproperty --mdc-staticradio-control-inactive-disabled-background - background color of the radio button when\n *  inactive and disabled\n * @cssproperty --mdc-staticradio-control-active-color - color of the radio button when active\n * @cssproperty --mdc-staticradio-control-active-disabled-background - background color of the radio button\n *  when active and disabled\n */",
+          "tagName": "mdc-statictoggle",
+          "jsDoc": "/**\n * This is a decorative component that is styled to look as a toggle. <br/>\n * It has 3 properties - checked, size and disabled. <br/>\n * We are using the same styling that has been created for the `mdc-toggle` component.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-statictoggle\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --mdc-statictoggle-width - Width of the toggle\n * @cssproperty --mdc-statictoggle-height - Height of the toggle\n * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle\n * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border - Border of the toggle\n * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state\n * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state\n * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state\n * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state\n * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state\n * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state\n */",
           "customElement": true
         }
       ],
@@ -30928,8 +31152,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "StaticRadio",
-            "module": "components/staticradio/staticradio.component.js"
+            "name": "StaticToggle",
+            "module": "components/statictoggle/statictoggle.component.js"
           }
         }
       ]
@@ -31743,180 +31967,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/statictoggle/statictoggle.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "This is a decorative component that is styled to look as a toggle. <br/>\nIt has 3 properties - checked, size and disabled. <br/>\nWe are using the same styling that has been created for the `mdc-toggle` component.",
-          "name": "StaticToggle",
-          "cssProperties": [
-            {
-              "description": "Width of the toggle",
-              "name": "--mdc-statictoggle-width"
-            },
-            {
-              "description": "Height of the toggle",
-              "name": "--mdc-statictoggle-height"
-            },
-            {
-              "description": "Width of the toggle when it's size is compact",
-              "name": "--mdc-statictoggle-width-compact"
-            },
-            {
-              "description": "Height of the toggle when it's size is compact",
-              "name": "--mdc-statictoggle-height-compact"
-            },
-            {
-              "description": "Border radius of the toggle",
-              "name": "--mdc-statictoggle-border-radius"
-            },
-            {
-              "description": "Border radius of the toggle when it's size is compact",
-              "name": "--mdc-statictoggle-border-radius-compact"
-            },
-            {
-              "description": "Border of the toggle",
-              "name": "--mdc-statictoggle-border"
-            },
-            {
-              "description": "Background color of the inactive toggle in rest state",
-              "name": "--mdc-statictoggle-inactive-rest-color"
-            },
-            {
-              "description": "Background color of the inactive toggle in disabled state",
-              "name": "--mdc-statictoggle-inactive-disabled-color"
-            },
-            {
-              "description": "Background color of the active toggle in rest state",
-              "name": "--mdc-statictoggle-active-rest-color"
-            },
-            {
-              "description": "Background color of the active toggle in disabled state",
-              "name": "--mdc-statictoggle-active-disabled-color"
-            },
-            {
-              "description": "Color of the icon in normal state",
-              "name": "--mdc-statictoggle-icon-color-normal"
-            },
-            {
-              "description": "Color of the icon in disabled state",
-              "name": "--mdc-statictoggle-icon-color-disabled"
-            },
-            {
-              "description": "Background color of the icon in normal state",
-              "name": "--mdc-statictoggle-icon-background-color-normal"
-            },
-            {
-              "description": "Background color of the icon in disabled state",
-              "name": "--mdc-statictoggle-icon-background-color-disabled"
-            }
-          ],
-          "slots": [
-            {
-              "description": "This is a default/unnamed slot",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "ToggleSize"
-              },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
-              "default": "default",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
-              "fieldName": "checked"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "ToggleSize"
-              },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
-              "default": "default",
-              "fieldName": "size"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-statictoggle",
-          "jsDoc": "/**\n * This is a decorative component that is styled to look as a toggle. <br/>\n * It has 3 properties - checked, size and disabled. <br/>\n * We are using the same styling that has been created for the `mdc-toggle` component.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-statictoggle\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --mdc-statictoggle-width - Width of the toggle\n * @cssproperty --mdc-statictoggle-height - Height of the toggle\n * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle\n * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border - Border of the toggle\n * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state\n * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state\n * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state\n * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state\n * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state\n * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "StaticToggle",
-            "module": "components/statictoggle/statictoggle.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/tablist/tablist.component.js",