@momentum-design/components 0.18.6 → 0.19.0

package/dist/custom-elements.json

@@ -1096,6 +1096,77 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/bullet/bullet.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
+          "name": "Bullet",
+          "cssProperties": [
+            {
+              "description": "background color of the bullet",
+              "name": "--mdc-bullet-background-color"
+            },
+            {
+              "description": "small size value of the bullet",
+              "name": "--mdc-bullet-size-small"
+            },
+            {
+              "description": "medium size value of the bullet",
+              "name": "--mdc-bullet-size-medium"
+            },
+            {
+              "description": "large size value of the bullet",
+              "name": "--mdc-bullet-size-large"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "privacy": "public",
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "attribute": "size",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-bullet",
+          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Bullet",
+            "module": "components/bullet/bullet.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.component.js",
@@ -1904,77 +1975,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/bullet/bullet.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
-          "name": "Bullet",
-          "cssProperties": [
-            {
-              "description": "background color of the bullet",
-              "name": "--mdc-bullet-background-color"
-            },
-            {
-              "description": "small size value of the bullet",
-              "name": "--mdc-bullet-size-small"
-            },
-            {
-              "description": "medium size value of the bullet",
-              "name": "--mdc-bullet-size-medium"
-            },
-            {
-              "description": "large size value of the bullet",
-              "name": "--mdc-bullet-size-large"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "privacy": "public",
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "attribute": "size",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-bullet",
-          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Bullet",
-            "module": "components/bullet/bullet.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/checkbox/checkbox.component.js",
@@ -4328,160 +4328,109 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/presence/presence.component.js",
+      "path": "components/modalcontainer/modalcontainer.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The `mdc-presence` component is a versatile UI element used to\ndisplay the presence status of a user or entity within an avatar component.\n\nThis component is ideal for use within avatar UIs where the presence status\nneeds to be visually represented.",
-          "name": "Presence",
+          "description": "The `mdc-modalcontainer` component is an element used to\ndisplay a modal container that can further be used in popover.",
+          "name": "Modalcontainer",
           "cssProperties": [
             {
-              "description": "The background color of the presence type active.",
-              "name": "--mdc-presence-active-background-color"
-            },
-            {
-              "description": "The background color of the presence type away.",
-              "name": "--mdc-presence-away-background-color"
-            },
-            {
-              "description": "The background color of the presence type away-calling.",
-              "name": "--mdc-presence-away-calling-background-color"
-            },
-            {
-              "description": "The background color of the presence type busy.",
-              "name": "--mdc-presence-busy-background-color"
-            },
-            {
-              "description": "The background color of the presence type dnd.",
-              "name": "--mdc-presence-dnd-background-color"
-            },
-            {
-              "description": "The background color of the presence type meeting.",
-              "name": "--mdc-presence-meeting-background-color"
-            },
-            {
-              "description": "The background color of the presence type on-call.",
-              "name": "--mdc-presence-on-call-background-color"
-            },
-            {
-              "description": "The background color of the presence type on-device.",
-              "name": "--mdc-presence-on-device-background-color"
-            },
-            {
-              "description": "The background color of the presence type on-mobile.",
-              "name": "--mdc-presence-on-mobile-background-color"
-            },
-            {
-              "description": "The background color of the presence type pause.",
-              "name": "--mdc-presence-pause-background-color"
+              "description": "primary background color of the modalcontainer",
+              "name": "--mdc-modalcontainer-primary-background-color"
             },
             {
-              "description": "The background color of the presence type pto.",
-              "name": "--mdc-presence-pto-background-color"
+              "description": "border color of the modalcontainer",
+              "name": "--mdc-modalcontainer-border-color"
             },
             {
-              "description": "The background color of the presence type presenting.",
-              "name": "--mdc-presence-presenting-background-color"
+              "description": "inverted background color of the modalcontainer",
+              "name": "--mdc-modalcontainer-inverted-background-color"
             },
             {
-              "description": "The background color of the presence type quiet.",
-              "name": "--mdc-presence-quiet-background-color"
+              "description": "inverted border color of the modalcontainer",
+              "name": "--mdc-modalcontainer-inverted-border-color"
             },
             {
-              "description": "The background color of the presence type scheduled.",
-              "name": "--mdc-presence-scheduled-background-color"
-            },
+              "description": "inverted text color of the modalcontainer",
+              "name": "--mdc-modalcontainer-inverted-text-color"
+            }
+          ],
+          "slots": [
             {
-              "description": "The background color of the presence type overlay.",
-              "name": "--mdc-presence-overlay-background-color"
+              "description": "Default slot for modal container",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "type",
+              "name": "color",
               "type": {
-                "text": "PresenceType"
+                "text": "ModalContainerColor"
               },
-              "description": "Supported presence types:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
-              "default": "active",
-              "attribute": "type",
+              "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
+              "default": "tonal",
+              "attribute": "color",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "elevation",
               "type": {
-                "text": "PresenceSize"
+                "text": "ModalContainerElevation"
               },
-              "description": "Acceptable values include:\n- XX_SMALL\n- X_SMALL\n- SMALL\n- MIDSIZE\n- LARGE\n- X_LARGE\n- XX_LARGE\n\nPresence icons are minimum 14px in size, meaning XX_Small, X_Small and Small presence\nicons will be no smaller than 14px.",
-              "default": "small",
-              "attribute": "size",
+              "description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
+              "default": "0",
+              "attribute": "elevation",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "iconSize",
-              "privacy": "private",
-              "description": "Get the size of the presence icon based on the given size type",
-              "readonly": true
+              "name": "role",
+              "type": {
+                "text": "ModalContainerRole"
+              },
+              "description": "Role of the modalcontainer",
+              "default": "dialog",
+              "attribute": "role"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "ModalContainerColor"
+              },
+              "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
+              "default": "tonal",
+              "fieldName": "color"
             },
             {
-              "kind": "field",
-              "name": "icon",
-              "privacy": "private",
-              "description": "Get the icon name based on the presence type",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "handleOnLoad",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Handles the successful load of an icon.\nSets the `currentIconType` property to match the `type` property."
-            },
-            {
-              "kind": "method",
-              "name": "handleOnError",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Handles an error that occurs when loading an icon."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "type",
+              "name": "elevation",
               "type": {
-                "text": "PresenceType"
+                "text": "ModalContainerElevation"
               },
-              "description": "Supported presence types:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
-              "default": "active",
-              "fieldName": "type"
+              "description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
+              "default": "0",
+              "fieldName": "elevation"
             },
             {
-              "name": "size",
+              "name": "role",
               "type": {
-                "text": "PresenceSize"
+                "text": "ModalContainerRole"
               },
-              "description": "Acceptable values include:\n- XX_SMALL\n- X_SMALL\n- SMALL\n- MIDSIZE\n- LARGE\n- X_LARGE\n- XX_LARGE\n\nPresence icons are minimum 14px in size, meaning XX_Small, X_Small and Small presence\nicons will be no smaller than 14px.",
-              "default": "small",
-              "fieldName": "size"
+              "description": "Role of the modalcontainer",
+              "default": "dialog",
+              "fieldName": "role"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-presence",
-          "jsDoc": "/**\n * The `mdc-presence` component is a versatile UI element used to\n * display the presence status of a user or entity within an avatar component.\n *\n * This component is ideal for use within avatar UIs where the presence status\n * needs to be visually represented.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-presence\n *\n * @cssproperty --mdc-presence-active-background-color - The background color of the presence type active.\n * @cssproperty --mdc-presence-away-background-color - The background color of the presence type away.\n * @cssproperty --mdc-presence-away-calling-background-color - The background color of the presence type away-calling.\n * @cssproperty --mdc-presence-busy-background-color - The background color of the presence type busy.\n * @cssproperty --mdc-presence-dnd-background-color - The background color of the presence type dnd.\n * @cssproperty --mdc-presence-meeting-background-color - The background color of the presence type meeting.\n * @cssproperty --mdc-presence-on-call-background-color - The background color of the presence type on-call.\n * @cssproperty --mdc-presence-on-device-background-color - The background color of the presence type on-device.\n * @cssproperty --mdc-presence-on-mobile-background-color - The background color of the presence type on-mobile.\n * @cssproperty --mdc-presence-pause-background-color - The background color of the presence type pause.\n * @cssproperty --mdc-presence-pto-background-color - The background color of the presence type pto.\n * @cssproperty --mdc-presence-presenting-background-color - The background color of the presence type presenting.\n * @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.\n * @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.\n * @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.\n */",
+          "tagName": "mdc-modalcontainer",
+          "jsDoc": "/**\n * The `mdc-modalcontainer` component is an element used to\n * display a modal container that can further be used in popover.\n *\n * @tagname mdc-modalcontainer\n *\n * @cssproperty --mdc-modalcontainer-primary-background-color - primary background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-border-color - border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-background-color - inverted background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-border-color - inverted border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-text-color - inverted text color of the modalcontainer\n *\n * @slot - Default slot for modal container\n */",
           "customElement": true
         }
       ],
@@ -4490,117 +4439,168 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Presence",
-            "module": "components/presence/presence.component.js"
+            "name": "Modalcontainer",
+            "module": "components/modalcontainer/modalcontainer.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/modalcontainer/modalcontainer.component.js",
+      "path": "components/presence/presence.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The `mdc-modalcontainer` component is an element used to\ndisplay a modal container that can further be used in popover.",
-          "name": "Modalcontainer",
+          "description": "The `mdc-presence` component is a versatile UI element used to\ndisplay the presence status of a user or entity within an avatar component.\n\nThis component is ideal for use within avatar UIs where the presence status\nneeds to be visually represented.",
+          "name": "Presence",
           "cssProperties": [
             {
-              "description": "primary background color of the modalcontainer",
-              "name": "--mdc-modalcontainer-primary-background-color"
+              "description": "The background color of the presence type active.",
+              "name": "--mdc-presence-active-background-color"
             },
             {
-              "description": "border color of the modalcontainer",
-              "name": "--mdc-modalcontainer-border-color"
+              "description": "The background color of the presence type away.",
+              "name": "--mdc-presence-away-background-color"
             },
             {
-              "description": "inverted background color of the modalcontainer",
-              "name": "--mdc-modalcontainer-inverted-background-color"
+              "description": "The background color of the presence type away-calling.",
+              "name": "--mdc-presence-away-calling-background-color"
             },
             {
-              "description": "inverted border color of the modalcontainer",
-              "name": "--mdc-modalcontainer-inverted-border-color"
+              "description": "The background color of the presence type busy.",
+              "name": "--mdc-presence-busy-background-color"
             },
             {
-              "description": "inverted text color of the modalcontainer",
-              "name": "--mdc-modalcontainer-inverted-text-color"
-            }
-          ],
-          "slots": [
+              "description": "The background color of the presence type dnd.",
+              "name": "--mdc-presence-dnd-background-color"
+            },
             {
-              "description": "Default slot for modal container",
-              "name": ""
+              "description": "The background color of the presence type meeting.",
+              "name": "--mdc-presence-meeting-background-color"
+            },
+            {
+              "description": "The background color of the presence type on-call.",
+              "name": "--mdc-presence-on-call-background-color"
+            },
+            {
+              "description": "The background color of the presence type on-device.",
+              "name": "--mdc-presence-on-device-background-color"
+            },
+            {
+              "description": "The background color of the presence type on-mobile.",
+              "name": "--mdc-presence-on-mobile-background-color"
+            },
+            {
+              "description": "The background color of the presence type pause.",
+              "name": "--mdc-presence-pause-background-color"
+            },
+            {
+              "description": "The background color of the presence type pto.",
+              "name": "--mdc-presence-pto-background-color"
+            },
+            {
+              "description": "The background color of the presence type presenting.",
+              "name": "--mdc-presence-presenting-background-color"
+            },
+            {
+              "description": "The background color of the presence type quiet.",
+              "name": "--mdc-presence-quiet-background-color"
+            },
+            {
+              "description": "The background color of the presence type scheduled.",
+              "name": "--mdc-presence-scheduled-background-color"
+            },
+            {
+              "description": "The background color of the presence type overlay.",
+              "name": "--mdc-presence-overlay-background-color"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "color",
+              "name": "type",
               "type": {
-                "text": "ModalContainerColor"
+                "text": "PresenceType"
               },
-              "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
-              "default": "tonal",
-              "attribute": "color",
+              "description": "Supported presence types:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
+              "default": "active",
+              "attribute": "type",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "elevation",
+              "name": "size",
               "type": {
-                "text": "ModalContainerElevation"
+                "text": "PresenceSize"
               },
-              "description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
-              "default": "0",
-              "attribute": "elevation",
+              "description": "Acceptable values include:\n- XX_SMALL\n- X_SMALL\n- SMALL\n- MIDSIZE\n- LARGE\n- X_LARGE\n- XX_LARGE\n\nPresence icons are minimum 14px in size, meaning XX_Small, X_Small and Small presence\nicons will be no smaller than 14px.",
+              "default": "small",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "role",
-              "type": {
-                "text": "ModalContainerRole"
+              "name": "iconSize",
+              "privacy": "private",
+              "description": "Get the size of the presence icon based on the given size type",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "icon",
+              "privacy": "private",
+              "description": "Get the icon name based on the presence type",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "handleOnLoad",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "description": "Role of the modalcontainer",
-              "default": "dialog",
-              "attribute": "role"
+              "description": "Handles the successful load of an icon.\nSets the `currentIconType` property to match the `type` property."
+            },
+            {
+              "kind": "method",
+              "name": "handleOnError",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Handles an error that occurs when loading an icon."
             }
           ],
           "attributes": [
             {
-              "name": "color",
-              "type": {
-                "text": "ModalContainerColor"
-              },
-              "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
-              "default": "tonal",
-              "fieldName": "color"
-            },
-            {
-              "name": "elevation",
+              "name": "type",
               "type": {
-                "text": "ModalContainerElevation"
+                "text": "PresenceType"
               },
-              "description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
-              "default": "0",
-              "fieldName": "elevation"
+              "description": "Supported presence types:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
+              "default": "active",
+              "fieldName": "type"
             },
             {
-              "name": "role",
+              "name": "size",
               "type": {
-                "text": "ModalContainerRole"
+                "text": "PresenceSize"
               },
-              "description": "Role of the modalcontainer",
-              "default": "dialog",
-              "fieldName": "role"
+              "description": "Acceptable values include:\n- XX_SMALL\n- X_SMALL\n- SMALL\n- MIDSIZE\n- LARGE\n- X_LARGE\n- XX_LARGE\n\nPresence icons are minimum 14px in size, meaning XX_Small, X_Small and Small presence\nicons will be no smaller than 14px.",
+              "default": "small",
+              "fieldName": "size"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-modalcontainer",
-          "jsDoc": "/**\n * The `mdc-modalcontainer` component is an element used to\n * display a modal container that can further be used in popover.\n *\n * @tagname mdc-modalcontainer\n *\n * @cssproperty --mdc-modalcontainer-primary-background-color - primary background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-border-color - border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-background-color - inverted background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-border-color - inverted border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-text-color - inverted text color of the modalcontainer\n *\n * @slot - Default slot for modal container\n */",
+          "tagName": "mdc-presence",
+          "jsDoc": "/**\n * The `mdc-presence` component is a versatile UI element used to\n * display the presence status of a user or entity within an avatar component.\n *\n * This component is ideal for use within avatar UIs where the presence status\n * needs to be visually represented.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-presence\n *\n * @cssproperty --mdc-presence-active-background-color - The background color of the presence type active.\n * @cssproperty --mdc-presence-away-background-color - The background color of the presence type away.\n * @cssproperty --mdc-presence-away-calling-background-color - The background color of the presence type away-calling.\n * @cssproperty --mdc-presence-busy-background-color - The background color of the presence type busy.\n * @cssproperty --mdc-presence-dnd-background-color - The background color of the presence type dnd.\n * @cssproperty --mdc-presence-meeting-background-color - The background color of the presence type meeting.\n * @cssproperty --mdc-presence-on-call-background-color - The background color of the presence type on-call.\n * @cssproperty --mdc-presence-on-device-background-color - The background color of the presence type on-device.\n * @cssproperty --mdc-presence-on-mobile-background-color - The background color of the presence type on-mobile.\n * @cssproperty --mdc-presence-pause-background-color - The background color of the presence type pause.\n * @cssproperty --mdc-presence-pto-background-color - The background color of the presence type pto.\n * @cssproperty --mdc-presence-presenting-background-color - The background color of the presence type presenting.\n * @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.\n * @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.\n * @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.\n */",
           "customElement": true
         }
       ],
@@ -4609,8 +4609,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Modalcontainer",
-            "module": "components/modalcontainer/modalcontainer.component.js"
+            "name": "Presence",
+            "module": "components/presence/presence.component.js"
           }
         }
       ]
@@ -4797,6 +4797,512 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/toggle/toggle.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Toggle Component is an interactive control used to switch between two mutually exclusive options,\nsuch as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\nwhere users need to enable or disable a feature.\nIt contains an optional label and an optional helper text.\n\nNote: It internally renders a checkbox styled as a toggle switch.",
+          "name": "Toggle",
+          "cssProperties": [
+            {
+              "description": "width of the toggle",
+              "name": "--mdc-toggle-width"
+            },
+            {
+              "description": "height of the toggle",
+              "name": "--mdc-toggle-height"
+            },
+            {
+              "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",
+              "name": "--mdc-toggle-height-compact"
+            },
+            {
+              "description": "border radius of the toggle",
+              "name": "--mdc-toggle-border-radius"
+            },
+            {
+              "description": "border radius of the toggle when it's size is compact",
+              "name": "--mdc-toggle-border-radius-compact"
+            },
+            {
+              "description": "border of the toggle",
+              "name": "--mdc-toggle-border"
+            },
+            {
+              "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": "background color of the active toggle in rest state",
+              "name": "--mdc-toggle-active-rest-color"
+            },
+            {
+              "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",
+              "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": "color of the toggle label and help text in disabled state",
+              "name": "--mdc-toggle-label-color-disabled"
+            }
+          ],
+          "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": "method",
+              "name": "setFormValue",
+              "privacy": "private",
+              "description": "Updates the form value to reflect the current state of the toggle.\nIf toggle is switched on, the value is set to either the user-provided value or 'isActive' if no value is provided.\nIf toggle is switched off, the value is set to null."
+            },
+            {
+              "kind": "method",
+              "name": "toggleState",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Toggles the state of the toggle element.\nIf the element is not disabled, then the checked property is toggled."
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "Toggles the state of the toggle element.\nand dispatch the new change event."
+            },
+            {
+              "kind": "method",
+              "name": "setToggleSize",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "size",
+                  "type": {
+                    "text": "ToggleSize"
+                  },
+                  "description": "The size to set."
+                }
+              ],
+              "description": "Sets the size attribute for the toggle component.\nIf the provided size is not included in the TOGGLE_SIZE,\nit defaults to the value specified in DEFAULTS.SIZE."
+            },
+            {
+              "kind": "field",
+              "name": "helpTextType",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "attribute": "help-text-type",
+              "reflects": true,
+              "default": "undefined as unknown",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "NameMixin",
+                "module": "utils/mixins/NameMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ValueMixin",
+                "module": "utils/mixins/ValueMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "attribute": "label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "id",
+              "default": "`mdc-input-${uuidv4()}`",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "attribute": "id",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "attribute": "help-text",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLabelElement",
+              "privacy": "protected",
+              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelpTextIcon",
+              "privacy": "protected",
+              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelpText",
+              "privacy": "protected",
+              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "protected",
+              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelperText",
+              "privacy": "protected",
+              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "EventConstructor"
+              }
+            }
+          ],
+          "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": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "NameMixin",
+                "module": "src/utils/mixins/NameMixin.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "ValueMixin",
+                "module": "src/utils/mixins/ValueMixin.ts"
+              }
+            },
+            {
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+              }
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "id",
+              "default": "`mdc-input-${uuidv4()}`",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "fieldName": "id",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "help-text-type",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "fieldName": "helpTextType",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "NameMixin",
+              "module": "/src/utils/mixins/NameMixin"
+            },
+            {
+              "name": "ValueMixin",
+              "module": "/src/utils/mixins/ValueMixin"
+            },
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
+            }
+          ],
+          "superclass": {
+            "name": "FormfieldWrapper",
+            "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 * Note: It internally renders a checkbox styled as a toggle switch.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-toggle\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 */",
+          "customElement": true,
+          "slots": [
+            {
+              "description": "slot to add the label info icon",
+              "name": "label-info",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Toggle",
+            "module": "components/toggle/toggle.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "utils/mixins/AvatarComponentMixin.js",