@momentum-design/components 0.107.0 → 0.107.1

package/dist/custom-elements.json

@@ -10528,21 +10528,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "disableAriaHasPopup",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
-              "default": "false",
-              "attribute": "disable-aria-haspopup",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "keepConnectedTooltipClosed",
@@ -11334,19 +11319,6 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
-            {
-              "name": "disable-aria-haspopup",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
-              "default": "false",
-              "fieldName": "disableAriaHasPopup",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
             {
               "name": "keep-connected-tooltip-closed",
               "type": {
@@ -22502,7 +22474,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable setting the aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
+              "description": "Disable setting the `aria-expanded` attribute on trigger element.\n\nNote, when `disable-aria-expanded` is true\n - when its value change after first update to\n   - `true`: popover will not remove the `aria-expanded` to avoid conflicts when there are more than one popover\n     registered to the same trigger\n     - `false`: check `aria-expanded` value and update it if necessary.\n - aria-haspopup will be disabled as well",
               "default": "false",
               "attribute": "disable-aria-expanded",
               "reflects": true,
@@ -22511,21 +22483,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "disableAriaHasPopup",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
-              "default": "false",
-              "attribute": "disable-aria-haspopup",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "keepConnectedTooltipClosed",
@@ -23267,7 +23224,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable setting the aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
+              "description": "Disable setting the `aria-expanded` attribute on trigger element.\n\nNote, when `disable-aria-expanded` is true\n - when its value change after first update to\n   - `true`: popover will not remove the `aria-expanded` to avoid conflicts when there are more than one popover\n     registered to the same trigger\n     - `false`: check `aria-expanded` value and update it if necessary.\n - aria-haspopup will be disabled as well",
               "default": "false",
               "fieldName": "disableAriaExpanded",
               "inheritedFrom": {
@@ -23275,19 +23232,6 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
-            {
-              "name": "disable-aria-haspopup",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
-              "default": "false",
-              "fieldName": "disableAriaHasPopup",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
             {
               "name": "keep-connected-tooltip-closed",
               "type": {
@@ -26966,7 +26910,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Popover component is a lightweight floating UI element that displays additional content when triggered.\nIt can be used for tooltips, dropdowns, or contextual menus.\nThe popover automatically positions itself based on available space and\nsupports dynamic height adjustments with scrollable content when needed。",
+          "description": "Popover component is a lightweight floating UI element that displays additional content when triggered.\nIt can be used for tooltips, dropdowns, or contextual menus.\nThe popover automatically positions itself based on available space and\nsupports dynamic height adjustments with scrollable content when needed。\n\nNote:\n - A component (button) can trigger more than one popover, but only one of them should change the\n   aria-expanded and aria-haspopup, the rest of the popovers must have `disable-aria-expanded` attribute.",
           "name": "Popover",
           "cssProperties": [
             {
@@ -27400,22 +27344,11 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable setting the aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
+              "description": "Disable setting the `aria-expanded` attribute on trigger element.\n\nNote, when `disable-aria-expanded` is true\n - when its value change after first update to\n   - `true`: popover will not remove the `aria-expanded` to avoid conflicts when there are more than one popover\n     registered to the same trigger\n     - `false`: check `aria-expanded` value and update it if necessary.\n - aria-haspopup will be disabled as well",
               "default": "false",
               "attribute": "disable-aria-expanded",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "disableAriaHasPopup",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
-              "default": "false",
-              "attribute": "disable-aria-haspopup",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "keepConnectedTooltipClosed",
@@ -28452,19 +28385,10 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable setting the aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
+              "description": "Disable setting the `aria-expanded` attribute on trigger element.\n\nNote, when `disable-aria-expanded` is true\n - when its value change after first update to\n   - `true`: popover will not remove the `aria-expanded` to avoid conflicts when there are more than one popover\n     registered to the same trigger\n     - `false`: check `aria-expanded` value and update it if necessary.\n - aria-haspopup will be disabled as well",
               "default": "false",
               "fieldName": "disableAriaExpanded"
             },
-            {
-              "name": "disable-aria-haspopup",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
-              "default": "false",
-              "fieldName": "disableAriaHasPopup"
-            },
             {
               "name": "keep-connected-tooltip-closed",
               "type": {
@@ -28506,7 +28430,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-popover",
-          "jsDoc": "/**\n * Popover component is a lightweight floating UI element that displays additional content when triggered.\n * It can be used for tooltips, dropdowns, or contextual menus.\n * The popover automatically positions itself based on available space and\n * supports dynamic height adjustments with scrollable content when needed。\n *\n * @dependency mdc-button\n *\n * @tagname mdc-popover\n *\n *\n * @event shown - (React: onShown) This event is dispatched when the popover is shown\n * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden\n * @event created - (React: onCreated) This event is dispatched when the popover is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the popover is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n * @cssproperty --mdc-popover-max-width - max width of the popover\n * @cssproperty --mdc-popover-max-height - max height of the popover\n *\n * @slot - Default slot for the popover content\n *\n */",
+          "jsDoc": "/**\n * Popover component is a lightweight floating UI element that displays additional content when triggered.\n * It can be used for tooltips, dropdowns, or contextual menus.\n * The popover automatically positions itself based on available space and\n * supports dynamic height adjustments with scrollable content when needed。\n *\n * Note:\n *  - A component (button) can trigger more than one popover, but only one of them should change the\n *    aria-expanded and aria-haspopup, the rest of the popovers must have `disable-aria-expanded` attribute.\n *\n * @dependency mdc-button\n *\n * @tagname mdc-popover\n *\n *\n * @event shown - (React: onShown) This event is dispatched when the popover is shown\n * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden\n * @event created - (React: onCreated) This event is dispatched when the popover is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the popover is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n * @cssproperty --mdc-popover-max-width - max width of the popover\n * @cssproperty --mdc-popover-max-height - max height of the popover\n *\n * @slot - Default slot for the popover content\n *\n */",
           "customElement": true
         }
       ],
@@ -33655,912 +33579,912 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/slider/slider.component.js",
+      "path": "components/spinner/spinner.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "slider component, which ...",
-          "name": "Slider",
+          "description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the  progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
+          "name": "Spinner",
           "cssProperties": [
             {
-              "description": "Description of the CSS custom property",
-              "name": "--custom-property-name"
+              "description": "Allows customization of the default spinner color.",
+              "name": "--mdc-spinner-default-color"
+            },
+            {
+              "description": "Allows customization of the inverted spinner color.",
+              "name": "--mdc-spinner-inverted-color"
+            },
+            {
+              "description": "Allows customization of the spinner Button variant color.",
+              "name": "--mdc-spinner-button-variant-color"
+            },
+            {
+              "description": "Allows customization of the spinner size.",
+              "name": "--mdc-spinner-size"
             }
           ],
-          "slots": [
+          "cssParts": [
             {
-              "description": "This is a default/unnamed slot",
-              "name": "default"
+              "description": "The svg which contains the circle spinner.",
+              "name": "container"
+            },
+            {
+              "description": "The circle of the spinner.",
+              "name": "circle"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "range",
+              "name": "inverted",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
+              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
               "default": "false",
-              "description": "Whether or not to show a value range. When false, the slider displays a slide-able handle for the value property; when true, it displays slide-able handles for the valueStart and valueEnd properties.",
-              "attribute": "range"
+              "attribute": "inverted",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "size",
               "type": {
-                "text": "boolean | undefined"
+                "text": "SpinnerSize | undefined"
               },
-              "description": "Whether the slider is disabled.",
-              "attribute": "disabled"
+              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
+              "default": "midsize",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "softDisabled",
+              "name": "ariaLabel",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | null"
               },
-              "description": "Acts similar to disabled, but component is focusable and tooltip is shown on focus.",
-              "attribute": "soft-disabled"
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
             },
             {
               "kind": "field",
-              "name": "leadingIcon",
+              "name": "variant",
               "type": {
-                "text": "string | undefined"
+                "text": "SpinnerVariant"
               },
-              "description": "Icon that represents the minimum value; ex: muted speaker.",
-              "attribute": "leading-icon"
-            },
+              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
+              "default": "standalone",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "trailingIcon",
+              "name": "inverted",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "Icon that represents the maximum value; ex: speaker with full volume.",
-              "attribute": "trailing-icon"
+              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "fieldName": "inverted"
             },
             {
-              "kind": "field",
-              "name": "min",
+              "name": "size",
               "type": {
-                "text": "number"
+                "text": "SpinnerSize | undefined"
               },
-              "default": "0",
-              "description": "The slider minimum value.",
-              "attribute": "min"
+              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
+              "default": "midsize",
+              "fieldName": "size"
             },
             {
-              "kind": "field",
-              "name": "max",
+              "name": "aria-label",
               "type": {
-                "text": "number"
+                "text": "string | null"
               },
-              "default": "100",
-              "description": "The slider maximum value.",
-              "attribute": "max"
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
             },
             {
-              "kind": "field",
-              "name": "value",
+              "name": "variant",
               "type": {
-                "text": "number | undefined"
+                "text": "SpinnerVariant"
               },
-              "description": "The slider value displayed when range is false.",
-              "attribute": "value"
+              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
+              "default": "standalone",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-spinner",
+          "jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the  progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Spinner",
+            "module": "components/spinner/spinner.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/staticcheckbox/staticcheckbox.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "This is a decorative component that is styled to look as a checkbox.\n\nIt has 3 properties - checked, indeterminate and disabled.\n\nWe are using the same styling that has been created for the `mdc-checkbox` component.",
+          "name": "StaticCheckbox",
+          "cssProperties": [
+            {
+              "description": "Border color in high contrast.",
+              "name": "--mdc-staticcheckbox-border-color"
             },
             {
-              "kind": "field",
-              "name": "valueStart",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The slider start value displayed when range is true.",
-              "attribute": "value-start"
+              "description": "Background color for a selected checkbox.",
+              "name": "--mdc-staticcheckbox-checked-background-color"
             },
             {
-              "kind": "field",
-              "name": "valueEnd",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The slider end value displayed when range is true.",
-              "attribute": "value-end"
+              "description": "Background color for a disabled checkbox.",
+              "name": "--mdc-staticcheckbox-disabled-background-color"
             },
             {
-              "kind": "field",
-              "name": "step",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "description": "The step between values. This will show tick marks and the stepper will snap to the nearest tick mark.",
-              "attribute": "step"
+              "description": "Border color for a disabled checkbox.",
+              "name": "--mdc-checkbox-disabled-border-color"
             },
             {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "It represents the label for slider component.",
-              "attribute": "label"
+              "description": "Background color for a disabled, selected checkbox.",
+              "name": "--mdc-checkbox-disabled-checked-icon-color"
             },
             {
-              "kind": "field",
-              "name": "labelStart",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The label text is shown below the slider (on leading side) representing the minimum starting value of the slider.",
-              "attribute": "label-start"
+              "description": "Icon color for a disabled checkbox.",
+              "name": "--mdc-staticcheckbox-disabled-icon-color"
             },
+            {
+              "description": "Background color for an unselected checkbox.",
+              "name": "--mdc-staticcheckbox-icon-background-color"
+            },
+            {
+              "description": "Default background color for an unselected checkbox.",
+              "name": "--mdc-staticcheckbox-icon-border-color"
+            },
+            {
+              "description": "Icon color for an unselected checkbox.",
+              "name": "--mdc-staticcheckbox-icon-color"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "labelEnd",
+              "name": "checked",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The label text is shown below the slider (on trailing side) representing the maximum starting value of the slider.",
-              "attribute": "label-end"
+              "default": "false",
+              "description": "Determines whether the checkbox is selected or unselected.",
+              "attribute": "checked",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "valueLabel",
+              "name": "indeterminate",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "An optional label for the slider's value displayed when range is false; if not set, the label is the value itself.",
-              "attribute": "value-label"
+              "default": "false",
+              "description": "Determines whether the checkbox is in an indeterminate state.",
+              "attribute": "indeterminate",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "valueLabelStart",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "An optional label for the slider's start value displayed when range is true; if not set, the label is the valueStart itself.",
-              "attribute": "value-label-start"
-            },
+              "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": [
             {
-              "kind": "field",
-              "name": "valueLabelEnd",
+              "name": "checked",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "An optional label for the slider's end value displayed when range is true; if not set, the label is the valueEnd itself.",
-              "attribute": "value-label-end"
+              "default": "false",
+              "description": "Determines whether the checkbox is selected or unselected.",
+              "fieldName": "checked"
             },
             {
-              "kind": "field",
-              "name": "ariaLabelStart",
+              "name": "indeterminate",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Aria label for the slider's start handle displayed when range is true.",
-              "attribute": "aria-label-start"
+              "default": "false",
+              "description": "Determines whether the checkbox is in an indeterminate state.",
+              "fieldName": "indeterminate"
             },
             {
-              "kind": "field",
-              "name": "ariaValuetextStart",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "Aria value text for the slider's start value displayed when range is true.",
-              "attribute": "aria-valuetext-start"
+              "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-staticcheckbox",
+          "jsDoc": "/**\n * This is a decorative component that is styled to look as a checkbox.\n *\n * It has 3 properties - checked, indeterminate and disabled.\n *\n * We are using the same styling that has been created for the `mdc-checkbox` component.\n *\n * @tagname mdc-staticcheckbox\n *\n * @dependency mdc-icon\n *\n * @cssproperty --mdc-staticcheckbox-border-color - Border color in high contrast.\n * @cssproperty --mdc-staticcheckbox-checked-background-color - Background color for a selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.\n *\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "StaticCheckbox",
+            "module": "components/staticcheckbox/staticcheckbox.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/staticchip/staticchip.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.\n\nIt is recommended to keep the label text for the chip component concise and compact.\nFor best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.",
+          "name": "StaticChip",
+          "cssProperties": [
+            {
+              "description": "The color of the static chip.",
+              "name": "--mdc-chip-color"
             },
+            {
+              "description": "The border color of the static chip.",
+              "name": "--mdc-chip-border-color"
+            },
+            {
+              "description": "The background color of the static chip.",
+              "name": "--mdc-chip-background-color"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "ariaLabelEnd",
+              "name": "color",
               "type": {
-                "text": "string"
+                "text": "ColorType"
               },
-              "default": "''",
-              "description": "Aria label for the slider's end handle displayed when range is true.",
-              "attribute": "aria-label-end"
+              "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
+              "default": "default",
+              "attribute": "color",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "ariaValuetextEnd",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Aria value text for the slider's end value displayed when range is true.",
-              "attribute": "aria-valuetext-end"
+              "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
+              "attribute": "label"
             },
             {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Name attribute for the slider (single value).",
-              "attribute": "name"
+              "kind": "method",
+              "name": "renderIcon",
+              "privacy": "private",
+              "description": "Renders the icon element if available.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
             },
             {
               "kind": "field",
-              "name": "nameStart",
+              "name": "iconName",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | undefined"
               },
-              "description": "Name attribute for the slider's start handle (range).",
-              "attribute": "name-start"
-            },
+              "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"
+              }
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "nameEnd",
+              "name": "color",
               "type": {
-                "text": "string | undefined"
+                "text": "ColorType"
               },
-              "description": "Name attribute for the slider's end handle (range).",
-              "attribute": "name-end"
+              "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
+              "default": "default",
+              "fieldName": "color"
             },
             {
-              "kind": "field",
-              "name": "dataAriaValuetext",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Aria value text for the slider's value displayed when range is false.",
-              "attribute": "data-aria-valuetext"
+              "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
+              "fieldName": "label"
             },
             {
-              "kind": "field",
-              "name": "dataAriaLabel",
+              "name": "icon-name",
               "type": {
-                "text": "string"
+                "text": "IconNames | undefined"
               },
-              "default": "''",
-              "description": "Aria label for the slider's handle displayed when range is false.",
-              "attribute": "data-aria-label"
+              "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"
+              }
             }
           ],
-          "attributes": [
+          "mixins": [
+            {
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-staticchip",
+          "jsDoc": "/**\n * mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.\n *\n * It is recommended to keep the label text for the chip component concise and compact.\n * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.\n *\n *\n * @tagname mdc-staticchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the static chip.\n * @cssproperty --mdc-chip-border-color - The border color of the static chip.\n * @cssproperty --mdc-chip-background-color - The background color of the static chip.\n *\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "StaticChip",
+            "module": "components/staticchip/staticchip.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/slider/slider.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "slider component, which ...",
+          "name": "Slider",
+          "cssProperties": [
             {
+              "description": "Description of the CSS custom property",
+              "name": "--custom-property-name"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
               "name": "range",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Whether or not to show a value range. When false, the slider displays a slide-able handle for the value property; when true, it displays slide-able handles for the valueStart and valueEnd properties.",
-              "fieldName": "range"
+              "attribute": "range"
             },
             {
+              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "Whether the slider is disabled.",
-              "fieldName": "disabled"
+              "attribute": "disabled"
             },
             {
-              "name": "soft-disabled",
+              "kind": "field",
+              "name": "softDisabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "Acts similar to disabled, but component is focusable and tooltip is shown on focus.",
-              "fieldName": "softDisabled"
+              "attribute": "soft-disabled"
             },
             {
-              "name": "leading-icon",
+              "kind": "field",
+              "name": "leadingIcon",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Icon that represents the minimum value; ex: muted speaker.",
-              "fieldName": "leadingIcon"
+              "attribute": "leading-icon"
             },
             {
-              "name": "trailing-icon",
+              "kind": "field",
+              "name": "trailingIcon",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Icon that represents the maximum value; ex: speaker with full volume.",
-              "fieldName": "trailingIcon"
+              "attribute": "trailing-icon"
             },
             {
+              "kind": "field",
               "name": "min",
               "type": {
                 "text": "number"
               },
               "default": "0",
               "description": "The slider minimum value.",
-              "fieldName": "min"
+              "attribute": "min"
             },
             {
+              "kind": "field",
               "name": "max",
               "type": {
                 "text": "number"
               },
               "default": "100",
               "description": "The slider maximum value.",
-              "fieldName": "max"
+              "attribute": "max"
             },
             {
+              "kind": "field",
               "name": "value",
               "type": {
                 "text": "number | undefined"
               },
               "description": "The slider value displayed when range is false.",
-              "fieldName": "value"
+              "attribute": "value"
             },
             {
-              "name": "value-start",
+              "kind": "field",
+              "name": "valueStart",
               "type": {
                 "text": "number | undefined"
               },
               "description": "The slider start value displayed when range is true.",
-              "fieldName": "valueStart"
+              "attribute": "value-start"
             },
             {
-              "name": "value-end",
+              "kind": "field",
+              "name": "valueEnd",
               "type": {
                 "text": "number | undefined"
               },
               "description": "The slider end value displayed when range is true.",
-              "fieldName": "valueEnd"
+              "attribute": "value-end"
             },
             {
+              "kind": "field",
               "name": "step",
               "type": {
                 "text": "number"
               },
               "default": "1",
               "description": "The step between values. This will show tick marks and the stepper will snap to the nearest tick mark.",
-              "fieldName": "step"
+              "attribute": "step"
             },
             {
+              "kind": "field",
               "name": "label",
               "type": {
                 "text": "string | undefined"
               },
               "description": "It represents the label for slider component.",
-              "fieldName": "label"
+              "attribute": "label"
             },
             {
-              "name": "label-start",
+              "kind": "field",
+              "name": "labelStart",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The label text is shown below the slider (on leading side) representing the minimum starting value of the slider.",
-              "fieldName": "labelStart"
+              "attribute": "label-start"
             },
             {
-              "name": "label-end",
+              "kind": "field",
+              "name": "labelEnd",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The label text is shown below the slider (on trailing side) representing the maximum starting value of the slider.",
-              "fieldName": "labelEnd"
+              "attribute": "label-end"
             },
             {
-              "name": "value-label",
+              "kind": "field",
+              "name": "valueLabel",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "An optional label for the slider's value displayed when range is false; if not set, the label is the value itself.",
-              "fieldName": "valueLabel"
+              "attribute": "value-label"
             },
             {
-              "name": "value-label-start",
+              "kind": "field",
+              "name": "valueLabelStart",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "An optional label for the slider's start value displayed when range is true; if not set, the label is the valueStart itself.",
-              "fieldName": "valueLabelStart"
+              "attribute": "value-label-start"
             },
             {
-              "name": "value-label-end",
+              "kind": "field",
+              "name": "valueLabelEnd",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "An optional label for the slider's end value displayed when range is true; if not set, the label is the valueEnd itself.",
-              "fieldName": "valueLabelEnd"
-            },
-            {
-              "name": "aria-label-start",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Aria label for the slider's start handle displayed when range is true.",
-              "fieldName": "ariaLabelStart"
-            },
-            {
-              "name": "aria-valuetext-start",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Aria value text for the slider's start value displayed when range is true.",
-              "fieldName": "ariaValuetextStart"
-            },
-            {
-              "name": "aria-label-end",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Aria label for the slider's end handle displayed when range is true.",
-              "fieldName": "ariaLabelEnd"
-            },
-            {
-              "name": "aria-valuetext-end",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Aria value text for the slider's end value displayed when range is true.",
-              "fieldName": "ariaValuetextEnd"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Name attribute for the slider (single value).",
-              "fieldName": "name"
-            },
-            {
-              "name": "name-start",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Name attribute for the slider's start handle (range).",
-              "fieldName": "nameStart"
-            },
-            {
-              "name": "name-end",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Name attribute for the slider's end handle (range).",
-              "fieldName": "nameEnd"
-            },
-            {
-              "name": "data-aria-valuetext",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Aria value text for the slider's value displayed when range is false.",
-              "fieldName": "dataAriaValuetext"
+              "attribute": "value-label-end"
             },
             {
-              "name": "data-aria-label",
+              "kind": "field",
+              "name": "ariaLabelStart",
               "type": {
                 "text": "string"
-              },
-              "default": "''",
-              "description": "Aria label for the slider's handle displayed when range is false.",
-              "fieldName": "dataAriaLabel"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-slider",
-          "jsDoc": "/**\n * slider component, which ...\n *\n * @tagname mdc-slider\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --custom-property-name - Description of the CSS custom property\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Slider",
-            "module": "components/slider/slider.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/spinner/spinner.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the  progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
-          "name": "Spinner",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default spinner color.",
-              "name": "--mdc-spinner-default-color"
+              },
+              "default": "''",
+              "description": "Aria label for the slider's start handle displayed when range is true.",
+              "attribute": "aria-label-start"
             },
             {
-              "description": "Allows customization of the inverted spinner color.",
-              "name": "--mdc-spinner-inverted-color"
+              "kind": "field",
+              "name": "ariaValuetextStart",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Aria value text for the slider's start value displayed when range is true.",
+              "attribute": "aria-valuetext-start"
             },
             {
-              "description": "Allows customization of the spinner Button variant color.",
-              "name": "--mdc-spinner-button-variant-color"
+              "kind": "field",
+              "name": "ariaLabelEnd",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Aria label for the slider's end handle displayed when range is true.",
+              "attribute": "aria-label-end"
             },
             {
-              "description": "Allows customization of the spinner size.",
-              "name": "--mdc-spinner-size"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The svg which contains the circle spinner.",
-              "name": "container"
+              "kind": "field",
+              "name": "ariaValuetextEnd",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Aria value text for the slider's end value displayed when range is true.",
+              "attribute": "aria-valuetext-end"
             },
             {
-              "description": "The circle of the spinner.",
-              "name": "circle"
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Name attribute for the slider (single value).",
+              "attribute": "name"
+            },
             {
               "kind": "field",
-              "name": "inverted",
+              "name": "nameStart",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
-              "default": "false",
-              "attribute": "inverted",
-              "reflects": true
+              "description": "Name attribute for the slider's start handle (range).",
+              "attribute": "name-start"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "nameEnd",
               "type": {
-                "text": "SpinnerSize | undefined"
+                "text": "string | undefined"
               },
-              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
-              "default": "midsize",
-              "attribute": "size",
-              "reflects": true
+              "description": "Name attribute for the slider's end handle (range).",
+              "attribute": "name-end"
             },
             {
               "kind": "field",
-              "name": "ariaLabel",
+              "name": "dataAriaValuetext",
               "type": {
-                "text": "string | null"
+                "text": "string"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
+              "default": "''",
+              "description": "Aria value text for the slider's value displayed when range is false.",
+              "attribute": "data-aria-valuetext"
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "dataAriaLabel",
               "type": {
-                "text": "SpinnerVariant"
+                "text": "string"
               },
-              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
-              "default": "standalone",
-              "attribute": "variant",
-              "reflects": true
+              "default": "''",
+              "description": "Aria label for the slider's handle displayed when range is false.",
+              "attribute": "data-aria-label"
             }
           ],
           "attributes": [
             {
-              "name": "inverted",
+              "name": "range",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
               "default": "false",
-              "fieldName": "inverted"
+              "description": "Whether or not to show a value range. When false, the slider displays a slide-able handle for the value property; when true, it displays slide-able handles for the valueStart and valueEnd properties.",
+              "fieldName": "range"
             },
             {
-              "name": "size",
+              "name": "disabled",
               "type": {
-                "text": "SpinnerSize | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
-              "default": "midsize",
-              "fieldName": "size"
+              "description": "Whether the slider is disabled.",
+              "fieldName": "disabled"
             },
             {
-              "name": "aria-label",
+              "name": "soft-disabled",
               "type": {
-                "text": "string | null"
+                "text": "boolean | undefined"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
+              "description": "Acts similar to disabled, but component is focusable and tooltip is shown on focus.",
+              "fieldName": "softDisabled"
             },
             {
-              "name": "variant",
+              "name": "leading-icon",
               "type": {
-                "text": "SpinnerVariant"
+                "text": "string | undefined"
               },
-              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
-              "default": "standalone",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-spinner",
-          "jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the  progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Spinner",
-            "module": "components/spinner/spinner.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/staticcheckbox/staticcheckbox.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "This is a decorative component that is styled to look as a checkbox.\n\nIt has 3 properties - checked, indeterminate and disabled.\n\nWe are using the same styling that has been created for the `mdc-checkbox` component.",
-          "name": "StaticCheckbox",
-          "cssProperties": [
-            {
-              "description": "Border color in high contrast.",
-              "name": "--mdc-staticcheckbox-border-color"
+              "description": "Icon that represents the minimum value; ex: muted speaker.",
+              "fieldName": "leadingIcon"
             },
             {
-              "description": "Background color for a selected checkbox.",
-              "name": "--mdc-staticcheckbox-checked-background-color"
+              "name": "trailing-icon",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Icon that represents the maximum value; ex: speaker with full volume.",
+              "fieldName": "trailingIcon"
             },
             {
-              "description": "Background color for a disabled checkbox.",
-              "name": "--mdc-staticcheckbox-disabled-background-color"
+              "name": "min",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The slider minimum value.",
+              "fieldName": "min"
             },
             {
-              "description": "Border color for a disabled checkbox.",
-              "name": "--mdc-checkbox-disabled-border-color"
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "The slider maximum value.",
+              "fieldName": "max"
             },
             {
-              "description": "Background color for a disabled, selected checkbox.",
-              "name": "--mdc-checkbox-disabled-checked-icon-color"
+              "name": "value",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The slider value displayed when range is false.",
+              "fieldName": "value"
             },
             {
-              "description": "Icon color for a disabled checkbox.",
-              "name": "--mdc-staticcheckbox-disabled-icon-color"
+              "name": "value-start",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The slider start value displayed when range is true.",
+              "fieldName": "valueStart"
             },
             {
-              "description": "Background color for an unselected checkbox.",
-              "name": "--mdc-staticcheckbox-icon-background-color"
+              "name": "value-end",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The slider end value displayed when range is true.",
+              "fieldName": "valueEnd"
             },
             {
-              "description": "Default background color for an unselected checkbox.",
-              "name": "--mdc-staticcheckbox-icon-border-color"
+              "name": "step",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "The step between values. This will show tick marks and the stepper will snap to the nearest tick mark.",
+              "fieldName": "step"
             },
             {
-              "description": "Icon color for an unselected checkbox.",
-              "name": "--mdc-staticcheckbox-icon-color"
-            }
-          ],
-          "members": [
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "It represents the label for slider component.",
+              "fieldName": "label"
+            },
             {
-              "kind": "field",
-              "name": "checked",
+              "name": "label-start",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Determines whether the checkbox is selected or unselected.",
-              "attribute": "checked",
-              "reflects": true
+              "description": "The label text is shown below the slider (on leading side) representing the minimum starting value of the slider.",
+              "fieldName": "labelStart"
             },
             {
-              "kind": "field",
-              "name": "indeterminate",
+              "name": "label-end",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Determines whether the checkbox is in an indeterminate state.",
-              "attribute": "indeterminate",
-              "reflects": true
+              "description": "The label text is shown below the slider (on trailing side) representing the maximum starting value of the slider.",
+              "fieldName": "labelEnd"
             },
             {
-              "kind": "field",
-              "name": "disabled",
+              "name": "value-label",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "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": [
+              "default": "''",
+              "description": "An optional label for the slider's value displayed when range is false; if not set, the label is the value itself.",
+              "fieldName": "valueLabel"
+            },
             {
-              "name": "checked",
+              "name": "value-label-start",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Determines whether the checkbox is selected or unselected.",
-              "fieldName": "checked"
+              "default": "''",
+              "description": "An optional label for the slider's start value displayed when range is true; if not set, the label is the valueStart itself.",
+              "fieldName": "valueLabelStart"
             },
             {
-              "name": "indeterminate",
+              "name": "value-label-end",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Determines whether the checkbox is in an indeterminate state.",
-              "fieldName": "indeterminate"
+              "default": "''",
+              "description": "An optional label for the slider's end value displayed when range is true; if not set, the label is the valueEnd itself.",
+              "fieldName": "valueLabelEnd"
             },
             {
-              "name": "disabled",
+              "name": "aria-label-start",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "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-staticcheckbox",
-          "jsDoc": "/**\n * This is a decorative component that is styled to look as a checkbox.\n *\n * It has 3 properties - checked, indeterminate and disabled.\n *\n * We are using the same styling that has been created for the `mdc-checkbox` component.\n *\n * @tagname mdc-staticcheckbox\n *\n * @dependency mdc-icon\n *\n * @cssproperty --mdc-staticcheckbox-border-color - Border color in high contrast.\n * @cssproperty --mdc-staticcheckbox-checked-background-color - Background color for a selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.\n *\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "StaticCheckbox",
-            "module": "components/staticcheckbox/staticcheckbox.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/staticchip/staticchip.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.\n\nIt is recommended to keep the label text for the chip component concise and compact.\nFor best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.",
-          "name": "StaticChip",
-          "cssProperties": [
-            {
-              "description": "The color of the static chip.",
-              "name": "--mdc-chip-color"
+              "default": "''",
+              "description": "Aria label for the slider's start handle displayed when range is true.",
+              "fieldName": "ariaLabelStart"
             },
             {
-              "description": "The border color of the static chip.",
-              "name": "--mdc-chip-border-color"
+              "name": "aria-valuetext-start",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Aria value text for the slider's start value displayed when range is true.",
+              "fieldName": "ariaValuetextStart"
             },
             {
-              "description": "The background color of the static chip.",
-              "name": "--mdc-chip-background-color"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "color",
+              "name": "aria-label-end",
               "type": {
-                "text": "ColorType"
+                "text": "string"
               },
-              "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
-              "default": "default",
-              "attribute": "color",
-              "reflects": true
+              "default": "''",
+              "description": "Aria label for the slider's end handle displayed when range is true.",
+              "fieldName": "ariaLabelEnd"
             },
             {
-              "kind": "field",
-              "name": "label",
+              "name": "aria-valuetext-end",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
-              "attribute": "label"
+              "description": "Aria value text for the slider's end value displayed when range is true.",
+              "fieldName": "ariaValuetextEnd"
             },
             {
-              "kind": "method",
-              "name": "renderIcon",
-              "privacy": "private",
-              "description": "Renders the icon element if available.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Name attribute for the slider (single value).",
+              "fieldName": "name"
             },
             {
-              "kind": "field",
-              "name": "iconName",
+              "name": "name-start",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string | 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"
-              }
-            }
-          ],
-          "attributes": [
+              "description": "Name attribute for the slider's start handle (range).",
+              "fieldName": "nameStart"
+            },
             {
-              "name": "color",
+              "name": "name-end",
               "type": {
-                "text": "ColorType"
+                "text": "string | undefined"
               },
-              "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
-              "default": "default",
-              "fieldName": "color"
+              "description": "Name attribute for the slider's end handle (range).",
+              "fieldName": "nameEnd"
             },
             {
-              "name": "label",
+              "name": "data-aria-valuetext",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
-              "fieldName": "label"
+              "description": "Aria value text for the slider's value displayed when range is false.",
+              "fieldName": "dataAriaValuetext"
             },
             {
-              "name": "icon-name",
+              "name": "data-aria-label",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
+              "default": "''",
+              "description": "Aria label for the slider's handle displayed when range is false.",
+              "fieldName": "dataAriaLabel"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-staticchip",
-          "jsDoc": "/**\n * mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.\n *\n * It is recommended to keep the label text for the chip component concise and compact.\n * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.\n *\n *\n * @tagname mdc-staticchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the static chip.\n * @cssproperty --mdc-chip-border-color - The border color of the static chip.\n * @cssproperty --mdc-chip-background-color - The background color of the static chip.\n *\n */",
+          "tagName": "mdc-slider",
+          "jsDoc": "/**\n * slider component, which ...\n *\n * @tagname mdc-slider\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --custom-property-name - Description of the CSS custom property\n */",
           "customElement": true
         }
       ],
@@ -34569,8 +34493,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "StaticChip",
-            "module": "components/staticchip/staticchip.component.js"
+            "name": "Slider",
+            "module": "components/slider/slider.component.js"
           }
         }
       ]
@@ -39713,7 +39637,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable setting the aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
+              "description": "Disable setting the `aria-expanded` attribute on trigger element.\n\nNote, when `disable-aria-expanded` is true\n - when its value change after first update to\n   - `true`: popover will not remove the `aria-expanded` to avoid conflicts when there are more than one popover\n     registered to the same trigger\n     - `false`: check `aria-expanded` value and update it if necessary.\n - aria-haspopup will be disabled as well",
               "default": "false",
               "attribute": "disable-aria-expanded",
               "reflects": true,
@@ -39722,21 +39646,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "disableAriaHasPopup",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
-              "default": "false",
-              "attribute": "disable-aria-haspopup",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "keepConnectedTooltipClosed",
@@ -40528,7 +40437,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable setting the aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
+              "description": "Disable setting the `aria-expanded` attribute on trigger element.\n\nNote, when `disable-aria-expanded` is true\n - when its value change after first update to\n   - `true`: popover will not remove the `aria-expanded` to avoid conflicts when there are more than one popover\n     registered to the same trigger\n     - `false`: check `aria-expanded` value and update it if necessary.\n - aria-haspopup will be disabled as well",
               "default": "false",
               "fieldName": "disableAriaExpanded",
               "inheritedFrom": {
@@ -40536,19 +40445,6 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
-            {
-              "name": "disable-aria-haspopup",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
-              "default": "false",
-              "fieldName": "disableAriaHasPopup",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
             {
               "name": "keep-connected-tooltip-closed",
               "type": {
@@ -41797,7 +41693,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable setting the aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
+              "description": "Disable setting the `aria-expanded` attribute on trigger element.\n\nNote, when `disable-aria-expanded` is true\n - when its value change after first update to\n   - `true`: popover will not remove the `aria-expanded` to avoid conflicts when there are more than one popover\n     registered to the same trigger\n     - `false`: check `aria-expanded` value and update it if necessary.\n - aria-haspopup will be disabled as well",
               "default": "false",
               "attribute": "disable-aria-expanded",
               "reflects": true,
@@ -41806,21 +41702,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "disableAriaHasPopup",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
-              "default": "false",
-              "attribute": "disable-aria-haspopup",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "keepConnectedTooltipClosed",
@@ -42613,7 +42494,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable setting the aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
+              "description": "Disable setting the `aria-expanded` attribute on trigger element.\n\nNote, when `disable-aria-expanded` is true\n - when its value change after first update to\n   - `true`: popover will not remove the `aria-expanded` to avoid conflicts when there are more than one popover\n     registered to the same trigger\n     - `false`: check `aria-expanded` value and update it if necessary.\n - aria-haspopup will be disabled as well",
               "default": "false",
               "fieldName": "disableAriaExpanded",
               "inheritedFrom": {
@@ -42621,19 +42502,6 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
-            {
-              "name": "disable-aria-haspopup",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
-              "default": "false",
-              "fieldName": "disableAriaHasPopup",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
             {
               "name": "keep-connected-tooltip-closed",
               "type": {