@momentum-design/components 0.106.8 → 0.107.0

package/dist/custom-elements.json

@@ -33655,933 +33655,1060 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/spinner/spinner.component.js",
+      "path": "components/slider/slider.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",
+          "description": "slider component, which ...",
+          "name": "Slider",
           "cssProperties": [
             {
-              "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"
+              "description": "Description of the CSS custom property",
+              "name": "--custom-property-name"
             }
           ],
-          "cssParts": [
-            {
-              "description": "The svg which contains the circle spinner.",
-              "name": "container"
-            },
+          "slots": [
             {
-              "description": "The circle of the spinner.",
-              "name": "circle"
+              "description": "This is a default/unnamed slot",
+              "name": "default"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "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",
-              "attribute": "inverted",
-              "reflects": true
+              "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"
             },
             {
               "kind": "field",
-              "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",
-              "attribute": "size",
-              "reflects": true
+              "description": "Whether the slider is disabled.",
+              "attribute": "disabled"
             },
             {
               "kind": "field",
-              "name": "ariaLabel",
+              "name": "softDisabled",
               "type": {
-                "text": "string | null"
+                "text": "boolean | undefined"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
+              "description": "Acts similar to disabled, but component is focusable and tooltip is shown on focus.",
+              "attribute": "soft-disabled"
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "leadingIcon",
               "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",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "description": "Icon that represents the minimum value; ex: muted speaker.",
+              "attribute": "leading-icon"
+            },
             {
-              "name": "inverted",
+              "kind": "field",
+              "name": "trailingIcon",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
-              "default": "false",
-              "fieldName": "inverted"
+              "description": "Icon that represents the maximum value; ex: speaker with full volume.",
+              "attribute": "trailing-icon"
             },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "min",
               "type": {
-                "text": "SpinnerSize | undefined"
+                "text": "number"
               },
-              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
-              "default": "midsize",
-              "fieldName": "size"
+              "default": "0",
+              "description": "The slider minimum value.",
+              "attribute": "min"
             },
             {
-              "name": "aria-label",
+              "kind": "field",
+              "name": "max",
               "type": {
-                "text": "string | null"
+                "text": "number"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
+              "default": "100",
+              "description": "The slider maximum value.",
+              "attribute": "max"
             },
             {
-              "name": "variant",
+              "kind": "field",
+              "name": "value",
               "type": {
-                "text": "SpinnerVariant"
+                "text": "number | 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": "The slider value displayed when range is false.",
+              "attribute": "value"
             },
             {
-              "description": "Background color for a selected checkbox.",
-              "name": "--mdc-staticcheckbox-checked-background-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 disabled checkbox.",
-              "name": "--mdc-staticcheckbox-disabled-background-color"
+              "kind": "field",
+              "name": "valueEnd",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The slider end value displayed when range is true.",
+              "attribute": "value-end"
             },
             {
-              "description": "Border color for a disabled checkbox.",
-              "name": "--mdc-checkbox-disabled-border-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": "Background color for a disabled, selected checkbox.",
-              "name": "--mdc-checkbox-disabled-checked-icon-color"
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "It represents the label for slider component.",
+              "attribute": "label"
             },
             {
-              "description": "Icon color for a disabled checkbox.",
-              "name": "--mdc-staticcheckbox-disabled-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": "Background color for an unselected checkbox.",
-              "name": "--mdc-staticcheckbox-icon-background-color"
+              "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.",
+              "attribute": "label-end"
             },
             {
-              "description": "Default background color for an unselected checkbox.",
-              "name": "--mdc-staticcheckbox-icon-border-color"
+              "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.",
+              "attribute": "value-label"
             },
             {
-              "description": "Icon color for an unselected checkbox.",
-              "name": "--mdc-staticcheckbox-icon-color"
-            }
-          ],
-          "members": [
+              "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.",
+              "attribute": "value-label-start"
+            },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "valueLabelEnd",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Determines whether the checkbox is selected or unselected.",
-              "attribute": "checked",
-              "reflects": true
+              "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"
             },
             {
               "kind": "field",
-              "name": "indeterminate",
+              "name": "ariaLabelStart",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Determines whether the checkbox is in an indeterminate state.",
-              "attribute": "indeterminate",
-              "reflects": true
+              "default": "''",
+              "description": "Aria label for the slider's start handle displayed when range is true.",
+              "attribute": "aria-label-start"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "ariaValuetextStart",
               "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": [
-            {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the checkbox is selected or unselected.",
-              "fieldName": "checked"
+              "default": "''",
+              "description": "Aria value text for the slider's start value displayed when range is true.",
+              "attribute": "aria-valuetext-start"
             },
             {
-              "name": "indeterminate",
+              "kind": "field",
+              "name": "ariaLabelEnd",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Determines whether the checkbox is in an indeterminate state.",
-              "fieldName": "indeterminate"
+              "default": "''",
+              "description": "Aria label for the slider's end handle displayed when range is true.",
+              "attribute": "aria-label-end"
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "ariaValuetextEnd",
               "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/staticradio/staticradio.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "This is a decorative component that is styled to look as a radio.\nIt has 2 properties - checked and disabled.\n\nWe are using the same styling that has been created for the `mdc-radio` component.",
-          "name": "StaticRadio",
-          "cssProperties": [
-            {
-              "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"
+              "default": "''",
+              "description": "Aria value text for the slider's end value displayed when range is true.",
+              "attribute": "aria-valuetext-end"
             },
-            {
-              "description": "background color of the radio button when active and disabled",
-              "name": "--mdc-staticradio-control-active-disabled-background"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "checked",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
-              "attribute": "checked",
-              "reflects": true
+              "description": "Name attribute for the slider (single value).",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "readonly",
+              "name": "nameStart",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Determines whether the radio is read-only.",
-              "attribute": "readonly",
-              "reflects": true
+              "description": "Name attribute for the slider's start handle (range).",
+              "attribute": "name-start"
             },
             {
               "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",
+              "name": "nameEnd",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
-              "fieldName": "checked"
+              "description": "Name attribute for the slider's end handle (range).",
+              "attribute": "name-end"
             },
             {
-              "name": "readonly",
+              "kind": "field",
+              "name": "dataAriaValuetext",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Determines whether the radio is read-only.",
-              "fieldName": "readonly"
+              "default": "''",
+              "description": "Aria value text for the slider's value displayed when range is false.",
+              "attribute": "data-aria-valuetext"
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "dataAriaLabel",
               "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-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/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"
+              "default": "''",
+              "description": "Aria label for the slider's handle displayed when range is false.",
+              "attribute": "data-aria-label"
             }
           ],
-          "members": [
+          "attributes": [
             {
-              "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.",
-              "attribute": "range"
+              "fieldName": "range"
             },
             {
-              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "Whether the slider is disabled.",
-              "attribute": "disabled"
+              "fieldName": "disabled"
             },
             {
-              "kind": "field",
-              "name": "softDisabled",
+              "name": "soft-disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "Acts similar to disabled, but component is focusable and tooltip is shown on focus.",
-              "attribute": "soft-disabled"
+              "fieldName": "softDisabled"
             },
             {
-              "kind": "field",
-              "name": "leadingIcon",
+              "name": "leading-icon",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Icon that represents the minimum value; ex: muted speaker.",
-              "attribute": "leading-icon"
+              "fieldName": "leadingIcon"
             },
             {
-              "kind": "field",
-              "name": "trailingIcon",
+              "name": "trailing-icon",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Icon that represents the maximum value; ex: speaker with full volume.",
-              "attribute": "trailing-icon"
+              "fieldName": "trailingIcon"
             },
             {
-              "kind": "field",
               "name": "min",
               "type": {
                 "text": "number"
               },
               "default": "0",
               "description": "The slider minimum value.",
-              "attribute": "min"
+              "fieldName": "min"
             },
             {
-              "kind": "field",
               "name": "max",
               "type": {
                 "text": "number"
               },
               "default": "100",
               "description": "The slider maximum value.",
-              "attribute": "max"
+              "fieldName": "max"
             },
             {
-              "kind": "field",
               "name": "value",
               "type": {
                 "text": "number | undefined"
               },
               "description": "The slider value displayed when range is false.",
-              "attribute": "value"
+              "fieldName": "value"
             },
             {
-              "kind": "field",
-              "name": "valueStart",
+              "name": "value-start",
               "type": {
                 "text": "number | undefined"
               },
               "description": "The slider start value displayed when range is true.",
-              "attribute": "value-start"
+              "fieldName": "valueStart"
             },
             {
-              "kind": "field",
-              "name": "valueEnd",
+              "name": "value-end",
               "type": {
                 "text": "number | undefined"
               },
               "description": "The slider end value displayed when range is true.",
-              "attribute": "value-end"
+              "fieldName": "valueEnd"
             },
             {
-              "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"
+              "fieldName": "step"
             },
             {
-              "kind": "field",
               "name": "label",
               "type": {
                 "text": "string | undefined"
               },
               "description": "It represents the label for slider component.",
-              "attribute": "label"
+              "fieldName": "label"
             },
             {
-              "kind": "field",
-              "name": "labelStart",
+              "name": "label-start",
               "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"
+              "fieldName": "labelStart"
             },
             {
-              "kind": "field",
-              "name": "labelEnd",
+              "name": "label-end",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The label text is shown below the slider (on trailing side) representing the maximum starting value of the slider.",
-              "attribute": "label-end"
+              "fieldName": "labelEnd"
             },
             {
-              "kind": "field",
-              "name": "valueLabel",
+              "name": "value-label",
               "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.",
-              "attribute": "value-label"
+              "fieldName": "valueLabel"
             },
             {
-              "kind": "field",
-              "name": "valueLabelStart",
+              "name": "value-label-start",
               "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.",
-              "attribute": "value-label-start"
+              "fieldName": "valueLabelStart"
             },
             {
-              "kind": "field",
-              "name": "valueLabelEnd",
+              "name": "value-label-end",
               "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.",
-              "attribute": "value-label-end"
+              "fieldName": "valueLabelEnd"
             },
             {
-              "kind": "field",
-              "name": "ariaLabelStart",
+              "name": "aria-label-start",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "Aria label for the slider's start handle displayed when range is true.",
-              "attribute": "aria-label-start"
+              "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"
+            },
+            {
+              "name": "data-aria-label",
+              "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"
+            },
+            {
+              "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"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The svg which contains the circle spinner.",
+              "name": "container"
+            },
+            {
+              "description": "The circle of the spinner.",
+              "name": "circle"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "inverted",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "attribute": "inverted",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "SpinnerSize | undefined"
+              },
+              "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": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "SpinnerVariant"
+              },
+              "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": [
+            {
+              "name": "inverted",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "fieldName": "inverted"
             },
             {
-              "kind": "field",
-              "name": "ariaValuetextStart",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "SpinnerSize | undefined"
               },
-              "default": "''",
-              "description": "Aria value text for the slider's start value displayed when range is true.",
-              "attribute": "aria-valuetext-start"
+              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
+              "default": "midsize",
+              "fieldName": "size"
             },
             {
-              "kind": "field",
-              "name": "ariaLabelEnd",
+              "name": "aria-label",
               "type": {
-                "text": "string"
+                "text": "string | null"
               },
-              "default": "''",
-              "description": "Aria label for the slider's end handle displayed when range is true.",
-              "attribute": "aria-label-end"
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
             },
             {
-              "kind": "field",
-              "name": "ariaValuetextEnd",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "SpinnerVariant"
               },
-              "default": "''",
-              "description": "Aria value text for the slider's end value displayed when range is true.",
-              "attribute": "aria-valuetext-end"
+              "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": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Name attribute for the slider (single value).",
-              "attribute": "name"
+              "description": "Background color for a selected checkbox.",
+              "name": "--mdc-staticcheckbox-checked-background-color"
             },
             {
-              "kind": "field",
-              "name": "nameStart",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Name attribute for the slider's start handle (range).",
-              "attribute": "name-start"
+              "description": "Background color for a disabled checkbox.",
+              "name": "--mdc-staticcheckbox-disabled-background-color"
+            },
+            {
+              "description": "Border color for a disabled checkbox.",
+              "name": "--mdc-checkbox-disabled-border-color"
+            },
+            {
+              "description": "Background color for a disabled, selected checkbox.",
+              "name": "--mdc-checkbox-disabled-checked-icon-color"
+            },
+            {
+              "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": "nameEnd",
+              "name": "checked",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Name attribute for the slider's end handle (range).",
-              "attribute": "name-end"
+              "default": "false",
+              "description": "Determines whether the checkbox is selected or unselected.",
+              "attribute": "checked",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "dataAriaValuetext",
+              "name": "indeterminate",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Aria value text for the slider's value displayed when range is false.",
-              "attribute": "data-aria-valuetext"
+              "default": "false",
+              "description": "Determines whether the checkbox is in an indeterminate state.",
+              "attribute": "indeterminate",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "dataAriaLabel",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "Aria label for the slider's handle displayed when range is false.",
-              "attribute": "data-aria-label"
+              "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": "range",
+              "name": "checked",
               "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"
+              "description": "Determines whether the checkbox is selected or unselected.",
+              "fieldName": "checked"
             },
             {
-              "name": "disabled",
+              "name": "indeterminate",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "Whether the slider is disabled.",
-              "fieldName": "disabled"
+              "default": "false",
+              "description": "Determines whether the checkbox is in an indeterminate state.",
+              "fieldName": "indeterminate"
             },
             {
-              "name": "soft-disabled",
+              "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "Acts similar to disabled, but component is focusable and tooltip is shown on focus.",
-              "fieldName": "softDisabled"
-            },
+              "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": "leading-icon",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Icon that represents the minimum value; ex: muted speaker.",
-              "fieldName": "leadingIcon"
-            },
+              "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": [
             {
-              "name": "trailing-icon",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Icon that represents the maximum value; ex: speaker with full volume.",
-              "fieldName": "trailingIcon"
+              "description": "The color of the static chip.",
+              "name": "--mdc-chip-color"
             },
             {
-              "name": "min",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The slider minimum value.",
-              "fieldName": "min"
+              "description": "The border color of the static chip.",
+              "name": "--mdc-chip-border-color"
             },
             {
-              "name": "max",
+              "description": "The background color of the static chip.",
+              "name": "--mdc-chip-background-color"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "color",
               "type": {
-                "text": "number"
+                "text": "ColorType"
               },
-              "default": "100",
-              "description": "The slider maximum value.",
-              "fieldName": "max"
+              "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
             },
             {
-              "name": "value",
+              "kind": "field",
+              "name": "label",
               "type": {
-                "text": "number | undefined"
+                "text": "string"
               },
-              "description": "The slider value displayed when range is false.",
-              "fieldName": "value"
+              "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"
             },
             {
-              "name": "value-start",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The slider start value displayed when range is true.",
-              "fieldName": "valueStart"
+              "kind": "method",
+              "name": "renderIcon",
+              "privacy": "private",
+              "description": "Renders the icon element if available.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
             },
             {
-              "name": "value-end",
+              "kind": "field",
+              "name": "iconName",
               "type": {
-                "text": "number | undefined"
+                "text": "IconNames | undefined"
               },
-              "description": "The slider end value displayed when range is true.",
-              "fieldName": "valueEnd"
-            },
+              "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": [
             {
-              "name": "step",
+              "name": "color",
               "type": {
-                "text": "number"
+                "text": "ColorType"
               },
-              "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": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
+              "default": "default",
+              "fieldName": "color"
             },
             {
               "name": "label",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "It represents the label for slider component.",
+              "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"
             },
             {
-              "name": "label-start",
+              "name": "icon-name",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | undefined"
               },
-              "description": "The label text is shown below the slider (on leading side) representing the minimum starting value of the slider.",
-              "fieldName": "labelStart"
+              "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"
+            }
+          ],
+          "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/staticradio/staticradio.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "This is a decorative component that is styled to look as a radio.\nIt has 2 properties - checked and disabled.\n\nWe are using the same styling that has been created for the `mdc-radio` component.",
+          "name": "StaticRadio",
+          "cssProperties": [
+            {
+              "description": "size of the inner circle",
+              "name": "--mdc-staticradio-inner-circle-size"
             },
             {
-              "name": "label-end",
-              "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"
+              "description": "color of the label when disabled",
+              "name": "--mdc-staticradio-text-disabled-color"
             },
             {
-              "name": "value-label",
-              "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"
+              "description": "color of the radio button border when normal",
+              "name": "--mdc-staticradio-normal-border-color"
             },
             {
-              "name": "value-label-start",
-              "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"
+              "description": "color of the radio button border when disabled",
+              "name": "--mdc-staticradio-disabled-border-color"
             },
             {
-              "name": "value-label-end",
-              "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"
+              "description": "background color of the inner circle when normal",
+              "name": "--mdc-staticradio-inner-circle-normal-background"
             },
             {
-              "name": "aria-label-start",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Aria label for the slider's start handle displayed when range is true.",
-              "fieldName": "ariaLabelStart"
+              "description": "background color of the inner circle when disabled",
+              "name": "--mdc-staticradio-inner-circle-disabled-background"
             },
             {
-              "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": "color of the radio button when inactive",
+              "name": "--mdc-staticradio-control-inactive-color"
             },
             {
-              "name": "aria-label-end",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Aria label for the slider's end handle displayed when range is true.",
-              "fieldName": "ariaLabelEnd"
+              "description": "background color of the radio button when inactive and disabled",
+              "name": "--mdc-staticradio-control-inactive-disabled-background"
             },
             {
-              "name": "aria-valuetext-end",
+              "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": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Aria value text for the slider's end value displayed when range is true.",
-              "fieldName": "ariaValuetextEnd"
+              "default": "false",
+              "description": "Determines whether the radio is selected or unselected.",
+              "attribute": "checked",
+              "reflects": true
             },
             {
-              "name": "name",
+              "kind": "field",
+              "name": "readonly",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Name attribute for the slider (single value).",
-              "fieldName": "name"
+              "default": "false",
+              "description": "Determines whether the radio is read-only.",
+              "attribute": "readonly",
+              "reflects": true
             },
             {
-              "name": "name-start",
+              "kind": "field",
+              "name": "disabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "Name attribute for the slider's start handle (range).",
-              "fieldName": "nameStart"
-            },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            }
+          ],
+          "attributes": [
             {
-              "name": "name-end",
+              "name": "checked",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Name attribute for the slider's end handle (range).",
-              "fieldName": "nameEnd"
+              "default": "false",
+              "description": "Determines whether the radio is selected or unselected.",
+              "fieldName": "checked"
             },
             {
-              "name": "data-aria-valuetext",
+              "name": "readonly",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Aria value text for the slider's value displayed when range is false.",
-              "fieldName": "dataAriaValuetext"
+              "default": "false",
+              "description": "Determines whether the radio is read-only.",
+              "fieldName": "readonly"
             },
             {
-              "name": "data-aria-label",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "Aria label for the slider's handle displayed when range is false.",
-              "fieldName": "dataAriaLabel"
+              "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-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 */",
+          "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
         }
       ],
@@ -34590,8 +34717,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Slider",
-            "module": "components/slider/slider.component.js"
+            "name": "StaticRadio",
+            "module": "components/staticradio/staticradio.component.js"
           }
         }
       ]