@momentum-design/components 0.56.2 → 0.58.0

package/dist/custom-elements.json

@@ -8615,50 +8615,470 @@
           "kind": "class",
           "description": "`mdc-link` component can be used to navigate to a different page\nwithin the application or to an external site. It can be used to link to\nemails or phone numbers.\n\nThe `children` of the link component is expected to be the text content.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.",
           "name": "Link",
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "LinkSize"
+              },
+              "description": "Size of the link.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'",
+              "default": "large",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "getIconSize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Method to get the size of the trailing icon based on the link size."
+            },
+            {
+              "kind": "field",
+              "name": "iconName",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
+              "inheritedFrom": {
+                "name": "IconNameMixin",
+                "module": "utils/mixins/IconNameMixin.js"
+              }
+            },
+            {
+              "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"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "inline",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The link can be inline or standalone.",
+              "default": "false",
+              "attribute": "inline",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "components/linksimple/linksimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The link color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "attribute": "inverted",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "components/linksimple/linksimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "'#'",
+              "description": "Href for navigation. The URL that the hyperlink points to",
+              "attribute": "href",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "components/linksimple/linksimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "'_self'",
+              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
+              "attribute": "target",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "components/linksimple/linksimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "rel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
+              "attribute": "rel",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "components/linksimple/linksimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handleNavigation",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "components/linksimple/linksimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "Whether the element should be disabled"
+                }
+              ],
+              "description": "Sets or removes `aria-disabled` and updates `tabIndex` to reflect\nthe disabled state. When disabled, the element becomes unfocusable;\nwhen enabled, the previous `tabIndex` is restored.",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "components/linksimple/linksimple.component.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onClick) Fired when the user activates the Link using a mouse or assistive technology.",
+              "name": "click",
+              "reactName": "onClick",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onKeyDown) Fired when the user presses a key while the Link has focus.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onFocus) Fired when the Link receives keyboard or mouse focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onBlur) Fired when the Link loses keyboard or mouse focus.",
+              "name": "blur",
+              "reactName": "onBlur",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "LinkSize"
+              },
+              "description": "Size of the link.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'",
+              "default": "large",
+              "fieldName": "size"
+            },
+            {
+              "name": "icon-name",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
+              "inheritedFrom": {
+                "name": "IconNameMixin",
+                "module": "src/utils/mixins/IconNameMixin.ts"
+              }
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            },
+            {
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
+              }
+            },
+            {
+              "name": "inline",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The link can be inline or standalone.",
+              "default": "false",
+              "fieldName": "inline",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The link color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "fieldName": "inverted",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "'#'",
+              "description": "Href for navigation. The URL that the hyperlink points to",
+              "fieldName": "href",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "'_self'",
+              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
+              "fieldName": "target",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "name": "rel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
+              "fieldName": "rel",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Linksimple",
+            "module": "/src/components/linksimple/linksimple.component"
+          },
+          "tagName": "mdc-link",
+          "jsDoc": "/**\n * `mdc-link` component can be used to navigate to a different page\n * within the application or to an external site. It can be used to link to\n * emails or phone numbers.\n *\n * The `children` of the link component is expected to be the text content.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-link\n *\n * @event click - (React: onClick) Fired when the user activates the Link using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the Link has focus.\n * @event focus - (React: onFocus) Fired when the Link receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the Link loses keyboard or mouse focus.\n */",
+          "customElement": true,
+          "cssProperties": [
+            {
+              "description": "Border radius of the link.",
+              "name": "--mdc-link-border-radius",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "Color of the link’s child content in the active state.",
+              "name": "--mdc-link-color-active",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "Color of the link’s child content in the disabled state.",
+              "name": "--mdc-link-color-disabled",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "Color of the link’s child content in the hover state.",
+              "name": "--mdc-link-color-hover",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "Color of the link’s child content in the normal state.",
+              "name": "--mdc-link-color-normal",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "Color of the inverted link’s child content in the active state.",
+              "name": "--mdc-link-inverted-color-active",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "Color of the inverted link’s child content in the disabled state.",
+              "name": "--mdc-link-inverted-color-disabled",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "Color of the inverted link’s child content in the hover state.",
+              "name": "--mdc-link-inverted-color-hover",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "Color of the inverted link’s child content in the normal state.",
+              "name": "--mdc-link-inverted-color-normal",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Link",
+            "module": "components/link/link.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/linksimple/linksimple.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-linksimple` is a lightweight link component that can be used to navigate\nwithin the application or to an external URL. It does not have any predefined default size.\n\nThe `children` of the `mdc-linksimple` component can be customized to suit\ndifferent use cases, including text, icons, or other inline content. For the child to be an icon,\nthe `mdc-icon` component should be used to render.",
+          "name": "Linksimple",
           "cssProperties": [
             {
-              "description": "Border radius of the link",
+              "description": "Border radius of the link.",
               "name": "--mdc-link-border-radius"
             },
             {
-              "description": "Text and icon color of the link in active state",
+              "description": "Color of the link’s child content in the active state.",
               "name": "--mdc-link-color-active"
             },
             {
-              "description": "Text and icon color of the link in disabled state",
+              "description": "Color of the link’s child content in the disabled state.",
               "name": "--mdc-link-color-disabled"
             },
             {
-              "description": "Text and icon color of the link in hover state",
+              "description": "Color of the link’s child content in the hover state.",
               "name": "--mdc-link-color-hover"
             },
             {
-              "description": "Text and icon color of the link in normal state",
+              "description": "Color of the link’s child content in the normal state.",
               "name": "--mdc-link-color-normal"
             },
             {
-              "description": "Gap between the text and icon (only applicable when an icon is set)",
-              "name": "--mdc-link-icon-margin-left"
-            },
-            {
-              "description": "Text and icon color of the inverted link in active state",
+              "description": "Color of the inverted link’s child content in the active state.",
               "name": "--mdc-link-inverted-color-active"
             },
             {
-              "description": "Text and icon color of the inverted link in disabled state",
+              "description": "Color of the inverted link’s child content in the disabled state.",
               "name": "--mdc-link-inverted-color-disabled"
             },
             {
-              "description": "Text and icon color of the inverted link in hover state",
+              "description": "Color of the inverted link’s child content in the hover state.",
               "name": "--mdc-link-inverted-color-hover"
             },
             {
-              "description": "Text and icon color of the inverted link in normal state",
+              "description": "Color of the inverted link’s child content in the normal state.",
               "name": "--mdc-link-inverted-color-normal"
-            },
-            {
-              "description": "Text decoration of the link in disabled state for all variants",
-              "name": "--mdc-link-text-decoration-disabled"
             }
           ],
           "members": [
@@ -8684,17 +9104,6 @@
               "attribute": "inverted",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "LinkSize"
-              },
-              "description": "Size of the link.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'",
-              "default": "large",
-              "attribute": "size",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "href",
@@ -8732,17 +9141,6 @@
               "name": "handleNavigation",
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "getIconSize",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Method to get the size of the trailing icon based on the link size."
-            },
             {
               "kind": "method",
               "name": "setDisabled",
@@ -8787,19 +9185,6 @@
                 "name": "TabIndexMixin",
                 "module": "utils/mixins/TabIndexMixin.js"
               }
-            },
-            {
-              "kind": "field",
-              "name": "iconName",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
-              }
             }
           ],
           "events": [
@@ -8843,15 +9228,6 @@
               "default": "false",
               "fieldName": "inverted"
             },
-            {
-              "name": "size",
-              "type": {
-                "text": "LinkSize"
-              },
-              "description": "Size of the link.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'",
-              "default": "large",
-              "fieldName": "size"
-            },
             {
               "name": "href",
               "type": {
@@ -8903,18 +9279,6 @@
                 "name": "TabIndexMixin",
                 "module": "src/utils/mixins/TabIndexMixin.ts"
               }
-            },
-            {
-              "name": "icon-name",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
-              }
             }
           ],
           "mixins": [
@@ -8925,18 +9289,14 @@
             {
               "name": "TabIndexMixin",
               "module": "/src/utils/mixins/TabIndexMixin"
-            },
-            {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-link",
-          "jsDoc": "/**\n * `mdc-link` component can be used to navigate to a different page\n * within the application or to an external site. It can be used to link to\n * emails or phone numbers.\n *\n * The `children` of the link component is expected to be the text content.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-link\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the link\n * @cssproperty --mdc-link-color-active - Text and icon color of the link in active state\n * @cssproperty --mdc-link-color-disabled - Text and icon color of the link in disabled state\n * @cssproperty --mdc-link-color-hover - Text and icon color of the link in hover state\n * @cssproperty --mdc-link-color-normal - Text and icon color of the link in normal state\n * @cssproperty --mdc-link-icon-margin-left - Gap between the text and icon (only applicable when an icon is set)\n * @cssproperty --mdc-link-inverted-color-active - Text and icon color of the inverted link in active state\n * @cssproperty --mdc-link-inverted-color-disabled - Text and icon color of the inverted link in disabled state\n * @cssproperty --mdc-link-inverted-color-hover - Text and icon color of the inverted link in hover state\n * @cssproperty --mdc-link-inverted-color-normal - Text and icon color of the inverted link in normal state\n * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants\n */",
+          "tagName": "mdc-linksimple",
+          "jsDoc": "/**\n * `mdc-linksimple` is a lightweight link component that can be used to navigate\n * within the application or to an external URL. It does not have any predefined default size.\n *\n * The `children` of the `mdc-linksimple` component can be customized to suit\n * different use cases, including text, icons, or other inline content. For the child to be an icon,\n * the `mdc-icon` component should be used to render.\n *\n * @tagname mdc-linksimple\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the link.\n * @cssproperty --mdc-link-color-active - Color of the link’s child content in the active state.\n * @cssproperty --mdc-link-color-disabled - Color of the link’s child content in the disabled state.\n * @cssproperty --mdc-link-color-hover - Color of the link’s child content in the hover state.\n * @cssproperty --mdc-link-color-normal - Color of the link’s child content in the normal state.\n * @cssproperty --mdc-link-inverted-color-active - Color of the inverted link’s child content in the active state.\n * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted link’s child content in the disabled state.\n * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted link’s child content in the hover state.\n * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted link’s child content in the normal state.\n */",
           "customElement": true
         }
       ],
@@ -8945,8 +9305,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Link",
-            "module": "components/link/link.component.js"
+            "name": "Linksimple",
+            "module": "components/linksimple/linksimple.component.js"
           }
         }
       ]
@@ -16675,6 +17035,180 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/statictoggle/statictoggle.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "This is a decorative component that is styled to look as a toggle. <br/>\nIt has 3 properties - checked, size and disabled. <br/>\nWe are using the same styling that has been created for the `mdc-toggle` component.",
+          "name": "StaticToggle",
+          "cssProperties": [
+            {
+              "description": "Width of the toggle",
+              "name": "--mdc-statictoggle-width"
+            },
+            {
+              "description": "Height of the toggle",
+              "name": "--mdc-statictoggle-height"
+            },
+            {
+              "description": "Width of the toggle when it's size is compact",
+              "name": "--mdc-statictoggle-width-compact"
+            },
+            {
+              "description": "Height of the toggle when it's size is compact",
+              "name": "--mdc-statictoggle-height-compact"
+            },
+            {
+              "description": "Border radius of the toggle",
+              "name": "--mdc-statictoggle-border-radius"
+            },
+            {
+              "description": "Border radius of the toggle when it's size is compact",
+              "name": "--mdc-statictoggle-border-radius-compact"
+            },
+            {
+              "description": "Border of the toggle",
+              "name": "--mdc-statictoggle-border"
+            },
+            {
+              "description": "Background color of the inactive toggle in rest state",
+              "name": "--mdc-statictoggle-inactive-rest-color"
+            },
+            {
+              "description": "Background color of the inactive toggle in disabled state",
+              "name": "--mdc-statictoggle-inactive-disabled-color"
+            },
+            {
+              "description": "Background color of the active toggle in rest state",
+              "name": "--mdc-statictoggle-active-rest-color"
+            },
+            {
+              "description": "Background color of the active toggle in disabled state",
+              "name": "--mdc-statictoggle-active-disabled-color"
+            },
+            {
+              "description": "Color of the icon in normal state",
+              "name": "--mdc-statictoggle-icon-color-normal"
+            },
+            {
+              "description": "Color of the icon in disabled state",
+              "name": "--mdc-statictoggle-icon-color-disabled"
+            },
+            {
+              "description": "Background color of the icon in normal state",
+              "name": "--mdc-statictoggle-icon-background-color-normal"
+            },
+            {
+              "description": "Background color of the icon in disabled state",
+              "name": "--mdc-statictoggle-icon-background-color-disabled"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the toggle is active or inactive.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "ToggleSize"
+              },
+              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "default": "default",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the toggle is active or inactive.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "ToggleSize"
+              },
+              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "default": "default",
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-statictoggle",
+          "jsDoc": "/**\n * This is a decorative component that is styled to look as a toggle. <br/>\n * It has 3 properties - checked, size and disabled. <br/>\n * We are using the same styling that has been created for the `mdc-toggle` component.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-statictoggle\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --mdc-statictoggle-width - Width of the toggle\n * @cssproperty --mdc-statictoggle-height - Height of the toggle\n * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle\n * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border - Border of the toggle\n * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state\n * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state\n * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state\n * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state\n * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state\n * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "StaticToggle",
+            "module": "components/statictoggle/statictoggle.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/tab/tab.component.js",
@@ -18629,72 +19163,56 @@
           "name": "Toggle",
           "cssProperties": [
             {
-              "description": "width of the toggle",
+              "description": "Width of the toggle",
               "name": "--mdc-toggle-width"
             },
             {
-              "description": "height of the toggle",
+              "description": "Height of the toggle",
               "name": "--mdc-toggle-height"
             },
             {
-              "description": "width of the toggle when it's size is compact",
+              "description": "Width of the toggle when it's size is compact",
               "name": "--mdc-toggle-width-compact"
             },
             {
-              "description": "height of the toggle when it's size is compact",
+              "description": "Height of the toggle when it's size is compact",
               "name": "--mdc-toggle-height-compact"
             },
             {
-              "description": "border radius of the toggle",
-              "name": "--mdc-toggle-border-radius"
+              "description": "Line height of the toggle label",
+              "name": "--mdc-toggle-label-lineheight"
             },
             {
-              "description": "border radius of the toggle when it's size is compact",
-              "name": "--mdc-toggle-border-radius-compact"
+              "description": "Font size of the toggle label",
+              "name": "--mdc-toggle-label-fontsize"
             },
             {
-              "description": "border of the toggle",
-              "name": "--mdc-toggle-border"
+              "description": "Font weight of the toggle label",
+              "name": "--mdc-toggle-label-fontweight"
             },
             {
-              "description": "background color of the inactive toggle in rest state",
-              "name": "--mdc-toggle-inactive-rest-color"
-            },
-            {
-              "description": "background color of the inactive toggle in hover state",
-              "name": "--mdc-toggle-inactive-hover-color"
-            },
-            {
-              "description": "background color of the inactive toggle in pressed state",
-              "name": "--mdc-toggle-inactive-pressed-color"
-            },
-            {
-              "description": "background color of the inactive toggle in disabled state",
-              "name": "--mdc-toggle-inactive-disabled-color"
+              "description": "Color of the toggle label and help text in disabled state",
+              "name": "--mdc-toggle-label-color-disabled"
             },
             {
-              "description": "background color of the active toggle in rest state",
-              "name": "--mdc-toggle-active-rest-color"
+              "description": "Color of the help text label",
+              "name": "--mdc-toggle-help-text-color"
             },
             {
-              "description": "background color of the active toggle in hover state",
+              "description": "Background color of the active toggle in hover state",
               "name": "--mdc-toggle-active-hover-color"
             },
             {
-              "description": "background color of the active toggle in pressed state",
+              "description": "Background color of the active toggle in pressed state",
               "name": "--mdc-toggle-active-pressed-color"
             },
             {
-              "description": "background color of the active toggle in disabled state",
-              "name": "--mdc-toggle-active-disabled-color"
-            },
-            {
-              "description": " color of the help text label",
-              "name": "--mdc-toggle-help-text-color"
+              "description": "Background color of the inactive toggle in hover state",
+              "name": "--mdc-toggle-inactive-hover-color"
             },
             {
-              "description": "color of the toggle label and help text in disabled state",
-              "name": "--mdc-toggle-label-color-disabled"
+              "description": "Background color of the inactive toggle in pressed state",
+              "name": "--mdc-toggle-inactive-pressed-color"
             }
           ],
           "members": [
@@ -19274,7 +19792,7 @@
             "module": "/src/components/formfieldwrapper"
           },
           "tagName": "mdc-toggle",
-          "jsDoc": "/**\n * Toggle Component is an interactive control used to switch between two mutually exclusive options,\n * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n * It contains an optional label and an optional helper text.\n *\n * To create a group of toggles, use the FormFieldGroup component.\n *\n * Note: It internally renders a checkbox styled as a toggle switch.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-toggle\n *\n * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.\n *\n * @cssproperty --mdc-toggle-width - width of the toggle\n * @cssproperty --mdc-toggle-height - height of the toggle\n * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-height-compact - height of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-border-radius - border radius of the toggle\n * @cssproperty --mdc-toggle-border-radius-compact - border radius of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-border - border of the toggle\n * @cssproperty --mdc-toggle-inactive-rest-color - background color of the inactive toggle in rest state\n * @cssproperty --mdc-toggle-inactive-hover-color - background color of the inactive toggle in hover state\n * @cssproperty --mdc-toggle-inactive-pressed-color - background color of the inactive toggle in pressed state\n * @cssproperty --mdc-toggle-inactive-disabled-color - background color of the inactive toggle in disabled state\n * @cssproperty --mdc-toggle-active-rest-color - background color of the active toggle in rest state\n * @cssproperty --mdc-toggle-active-hover-color - background color of the active toggle in hover state\n * @cssproperty --mdc-toggle-active-pressed-color - background color of the active toggle in pressed state\n * @cssproperty --mdc-toggle-active-disabled-color - background color of the active toggle in disabled state\n * @cssproperty --mdc-toggle-help-text-color -  color of the help text label\n * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state\n *\n */",
+          "jsDoc": "/**\n * Toggle Component is an interactive control used to switch between two mutually exclusive options,\n * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n * It contains an optional label and an optional helper text.\n *\n * To create a group of toggles, use the FormFieldGroup component.\n *\n * Note: It internally renders a checkbox styled as a toggle switch.\n *\n * @dependency mdc-icon\n * @dependency mdc-statictoggle\n *\n * @tagname mdc-toggle\n *\n * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.\n *\n * @cssproperty --mdc-toggle-width - Width of the toggle\n * @cssproperty --mdc-toggle-height - Height of the toggle\n * @cssproperty --mdc-toggle-width-compact - Width of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-height-compact - Height of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-label-lineheight - Line height of the toggle label\n * @cssproperty --mdc-toggle-label-fontsize - Font size of the toggle label\n * @cssproperty --mdc-toggle-label-fontweight - Font weight of the toggle label\n * @cssproperty --mdc-toggle-label-color-disabled - Color of the toggle label and help text in disabled state\n * @cssproperty --mdc-toggle-help-text-color - Color of the help text label\n * @cssproperty --mdc-toggle-active-hover-color - Background color of the active toggle in hover state\n * @cssproperty --mdc-toggle-active-pressed-color - Background color of the active toggle in pressed state\n * @cssproperty --mdc-toggle-inactive-hover-color - Background color of the inactive toggle in hover state\n * @cssproperty --mdc-toggle-inactive-pressed-color - Background color of the inactive toggle in pressed state\n */",
           "customElement": true,
           "slots": [
             {