@momentum-design/components 0.118.4 → 0.118.6

package/dist/custom-elements.json

@@ -4729,77 +4729,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/brandvisual/brandvisual.component.js",
@@ -4976,6 +4905,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",
@@ -10351,7 +10351,7 @@
               "kind": "method",
               "name": "renderLabel",
               "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "description": "renders the label container that contains the label and labelInfoToggleTip.",
               "return": {
                 "type": {
                   "text": ""
@@ -10366,7 +10366,7 @@
               "kind": "method",
               "name": "renderHelperText",
               "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "description": "renders the help-text container that contains the helpertext icon and helpertext.",
               "return": {
                 "type": {
                   "text": ""
@@ -14120,7 +14120,7 @@
               "kind": "method",
               "name": "renderLabel",
               "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "description": "renders the label container that contains the label and labelInfoToggleTip.",
               "return": {
                 "type": {
                   "text": ""
@@ -14135,7 +14135,7 @@
               "kind": "method",
               "name": "renderHelperText",
               "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "description": "renders the help-text container that contains the helpertext icon and helpertext.",
               "return": {
                 "type": {
                   "text": ""
@@ -16732,7 +16732,7 @@
               "kind": "method",
               "name": "renderLabel",
               "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "description": "renders the label container that contains the label and labelInfoToggleTip.",
               "return": {
                 "type": {
                   "text": ""
@@ -16747,7 +16747,7 @@
               "kind": "method",
               "name": "renderHelperText",
               "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "description": "renders the help-text container that contains the helpertext icon and helpertext.",
               "return": {
                 "type": {
                   "text": ""
@@ -17055,7 +17055,7 @@
               "kind": "method",
               "name": "renderLabel",
               "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "description": "renders the label container that contains the label and labelInfoToggleTip.",
               "return": {
                 "type": {
                   "text": ""
@@ -17066,7 +17066,7 @@
               "kind": "method",
               "name": "renderHelperText",
               "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "description": "renders the help-text container that contains the helpertext icon and helpertext.",
               "return": {
                 "type": {
                   "text": ""
@@ -18652,7 +18652,7 @@
               "kind": "method",
               "name": "renderLabel",
               "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "description": "renders the label container that contains the label and labelInfoToggleTip.",
               "return": {
                 "type": {
                   "text": ""
@@ -18667,7 +18667,7 @@
               "kind": "method",
               "name": "renderHelperText",
               "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "description": "renders the help-text container that contains the helpertext icon and helpertext.",
               "return": {
                 "type": {
                   "text": ""
@@ -30738,7 +30738,7 @@
               "kind": "method",
               "name": "renderLabel",
               "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "description": "renders the label container that contains the label and labelInfoToggleTip.",
               "return": {
                 "type": {
                   "text": ""
@@ -30753,7 +30753,7 @@
               "kind": "method",
               "name": "renderHelperText",
               "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "description": "renders the help-text container that contains the helpertext icon and helpertext.",
               "return": {
                 "type": {
                   "text": ""
@@ -31270,13 +31270,260 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/presence/presence.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",
+          "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": "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"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The presence content.",
+              "name": "presence-content"
+            },
+            {
+              "description": "The presence icon.",
+              "name": "mdc-presence-icon"
+            },
+            {
+              "description": "The presence icon for active.",
+              "name": "mdc-presence-icon__active"
+            },
+            {
+              "description": "The presence icon for away.",
+              "name": "mdc-presence-icon__away"
+            },
+            {
+              "description": "The presence icon for away-calling.",
+              "name": "mdc-presence-icon__away-calling"
+            },
+            {
+              "description": "The presence icon for busy.",
+              "name": "mdc-presence-icon__busy"
+            },
+            {
+              "description": "The presence icon for dnd.",
+              "name": "mdc-presence-icon__dnd"
+            },
+            {
+              "description": "The presence icon for meeting.",
+              "name": "mdc-presence-icon__meeting"
+            },
+            {
+              "description": "The presence icon for on-call.",
+              "name": "mdc-presence-icon__on-call"
+            },
+            {
+              "description": "The presence icon for on-device.",
+              "name": "mdc-presence-icon__on-device"
+            },
+            {
+              "description": "The presence icon for on-mobile.",
+              "name": "mdc-presence-icon__on-mobile"
+            },
+            {
+              "description": "The presence icon for pause.",
+              "name": "mdc-presence-icon__pause"
+            },
+            {
+              "description": "The presence icon for pto.",
+              "name": "mdc-presence-icon__pto"
+            },
+            {
+              "description": "The presence icon for presenting.",
+              "name": "mdc-presence-icon__presenting"
+            },
+            {
+              "description": "The presence icon for quiet.",
+              "name": "mdc-presence-icon__quiet"
+            },
+            {
+              "description": "The presence icon for scheduled.",
+              "name": "mdc-presence-icon__scheduled"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "PresenceType"
+              },
+              "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": "size",
+              "type": {
+                "text": "PresenceSize"
+              },
+              "description": "Acceptable numeric values include:\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124\n\nPresence icons are minimum 14px in size, meaning 24, 32, and 48 presence\nicons will be no smaller than 14px (for sizes 24, 32, 48).",
+              "default": "32",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "setSize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "size",
+                  "type": {
+                    "text": "PresenceSize"
+                  }
+                }
+              ]
+            },
+            {
+              "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",
+              "type": {
+                "text": "PresenceType"
+              },
+              "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": "size",
+              "type": {
+                "text": "PresenceSize"
+              },
+              "description": "Acceptable numeric values include:\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124\n\nPresence icons are minimum 14px in size, meaning 24, 32, and 48 presence\nicons will be no smaller than 14px (for sizes 24, 32, 48).",
+              "default": "32",
+              "fieldName": "size"
+            }
+          ],
+          "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 *\n * @csspart presence-content - The presence content.\n * @csspart mdc-presence-icon - The presence icon.\n * @csspart mdc-presence-icon__active - The presence icon for active.\n * @csspart mdc-presence-icon__away - The presence icon for away.\n * @csspart mdc-presence-icon__away-calling - The presence icon for away-calling.\n * @csspart mdc-presence-icon__busy - The presence icon for busy.\n * @csspart mdc-presence-icon__dnd - The presence icon for dnd.\n * @csspart mdc-presence-icon__meeting - The presence icon for meeting.\n * @csspart mdc-presence-icon__on-call - The presence icon for on-call.\n * @csspart mdc-presence-icon__on-device - The presence icon for on-device.\n * @csspart mdc-presence-icon__on-mobile - The presence icon for on-mobile.\n * @csspart mdc-presence-icon__pause - The presence icon for pause.\n * @csspart mdc-presence-icon__pto - The presence icon for pto.\n * @csspart mdc-presence-icon__presenting - The presence icon for presenting.\n * @csspart mdc-presence-icon__quiet - The presence icon for quiet.\n * @csspart mdc-presence-icon__scheduled - The presence icon for scheduled.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Presence",
+            "module": "components/presence/presence.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/popover/popover.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Popover component is a lightweight floating UI element that displays additional content when triggered.\nIt can be used for tooltips, dropdowns, or contextual menus.\nThe popover automatically positions itself based on available space and\nsupports dynamic height adjustments with scrollable content when needed。\n\nNote:\n - A component (button) can trigger more than one popover, but only one of them should change the\n   aria-expanded and aria-haspopup, the rest of the popovers must have `disable-aria-expanded` attribute.",
+          "description": "Popover is genric overlay which can be trigered by any actinable element.\n\nIt can be used for tooltips, dropdowns, menus or any showing any other contextual content.\n\nThe popover automatically positions itself based on available space and\nsupports dynamic height adjustments with scrollable content when needed.\nIt uses [Floating UI](https://floating-ui.com/) for maintaining the position of the popover.\n\n## Limitations\n\n### On trigger for multiple popovers\n\nA component (button, etc.) can trigger more than one popover, but only one of them should change the\naria-expanded and aria-haspopup attributes on the trigger.\n\nTo prevent unexpected attribute changes on the trigger `disable-aria-expanded` attribute must be set on all linked\nPopoers except one.\n\n### React Popover with append-to attribute\n\nReact mounts the popover based on the virtual DOM, but when the append-to attribute is set, the popover removes itself\nand mounts to the specified element. React will not know about the move and will not know about the\nnewly created mdc-popoverportal element either. This throws a `NotFoundError` error when the Popover is directly\nadded/removed by React, for example:\n\n```tsx\nconst SomeComponent = () => {\n   const [isOpen, setIsOpen] = useState(false);\n   return (<div>\n     {isOpen && <Popover append-to=\"some-element-id\">...</mdc-popover>}\n   </div>);\n}\n```\nAs a workaround Popover need to wrap with any other element/component, for example:\n```tsx\nconst SomeComponent = () => {\n   const [isOpen, setIsOpen] = useState(false);\n   return (<div>\n     {isOpen && <div>\n       <Popover append-to=\"some-element-id\">...</mdc-popover>\n     <div>}\n   </div>);\n}\n```\nNote the wrapper <div> around the Popover component (React.Fragment does not work).",
           "name": "Popover",
           "cssProperties": [
             {
@@ -32799,7 +33046,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-popover",
-          "jsDoc": "/**\n * Popover component is a lightweight floating UI element that displays additional content when triggered.\n * It can be used for tooltips, dropdowns, or contextual menus.\n * The popover automatically positions itself based on available space and\n * supports dynamic height adjustments with scrollable content when needed。\n *\n * Note:\n *  - A component (button) can trigger more than one popover, but only one of them should change the\n *    aria-expanded and aria-haspopup, the rest of the popovers must have `disable-aria-expanded` attribute.\n *\n * @dependency mdc-button\n *\n * @tagname mdc-popover\n *\n *\n * @event shown - (React: onShown) This event is dispatched when the popover is shown\n * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden\n * @event created - (React: onCreated) This event is dispatched when the popover is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the popover is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n * @cssproperty --mdc-popover-max-width - max width of the popover\n * @cssproperty --mdc-popover-max-height - max height of the popover\n * @cssproperty --mdc-popover-width - width of the popover\n *\n * @slot - Default slot for the popover content\n *\n * @csspart popover-close - The close button of the popover.\n * @csspart popover-content - The content of the popover.\n * @csspart popover-hover-bridge - The hover bridge of the popover.\n */",
+          "jsDoc": "/**\n * Popover is genric overlay which can be trigered by any actinable element.\n *\n * It can be used for tooltips, dropdowns, menus or any showing any other contextual content.\n *\n * The popover automatically positions itself based on available space and\n * supports dynamic height adjustments with scrollable content when needed.\n * It uses [Floating UI](https://floating-ui.com/) for maintaining the position of the popover.\n *\n * ## Limitations\n *\n * ### On trigger for multiple popovers\n *\n * A component (button, etc.) can trigger more than one popover, but only one of them should change the\n * aria-expanded and aria-haspopup attributes on the trigger.\n *\n * To prevent unexpected attribute changes on the trigger `disable-aria-expanded` attribute must be set on all linked\n * Popoers except one.\n *\n * ### React Popover with append-to attribute\n *\n * React mounts the popover based on the virtual DOM, but when the append-to attribute is set, the popover removes itself\n * and mounts to the specified element. React will not know about the move and will not know about the\n * newly created mdc-popoverportal element either. This throws a `NotFoundError` error when the Popover is directly\n * added/removed by React, for example:\n *\n * ```tsx\n * const SomeComponent = () => {\n *    const [isOpen, setIsOpen] = useState(false);\n *    return (<div>\n *      {isOpen && <Popover append-to=\"some-element-id\">...</mdc-popover>}\n *    </div>);\n * }\n * ```\n * As a workaround Popover need to wrap with any other element/component, for example:\n * ```tsx\n * const SomeComponent = () => {\n *    const [isOpen, setIsOpen] = useState(false);\n *    return (<div>\n *      {isOpen && <div>\n *        <Popover append-to=\"some-element-id\">...</mdc-popover>\n *      <div>}\n *    </div>);\n * }\n * ```\n * Note the wrapper <div> around the Popover component (React.Fragment does not work).\n *\n * @dependency mdc-button\n *\n * @tagname mdc-popover\n *\n * @event shown - (React: onShown) This event is dispatched when the popover is shown\n * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden\n * @event created - (React: onCreated) This event is dispatched when the popover is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the popover is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n * @cssproperty --mdc-popover-max-width - max width of the popover\n * @cssproperty --mdc-popover-max-height - max height of the popover\n * @cssproperty --mdc-popover-width - width of the popover\n *\n * @slot - Default slot for the popover content\n *\n * @csspart popover-close - The close button of the popover.\n * @csspart popover-content - The content of the popover.\n * @csspart popover-hover-bridge - The hover bridge of the popover.\n */",
           "customElement": true
         }
       ],
@@ -32816,247 +33063,20 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/presence/presence.component.js",
+      "path": "components/popover/popover.portal.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",
-          "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": "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"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The presence content.",
-              "name": "presence-content"
-            },
-            {
-              "description": "The presence icon.",
-              "name": "mdc-presence-icon"
-            },
-            {
-              "description": "The presence icon for active.",
-              "name": "mdc-presence-icon__active"
-            },
-            {
-              "description": "The presence icon for away.",
-              "name": "mdc-presence-icon__away"
-            },
-            {
-              "description": "The presence icon for away-calling.",
-              "name": "mdc-presence-icon__away-calling"
-            },
-            {
-              "description": "The presence icon for busy.",
-              "name": "mdc-presence-icon__busy"
-            },
-            {
-              "description": "The presence icon for dnd.",
-              "name": "mdc-presence-icon__dnd"
-            },
-            {
-              "description": "The presence icon for meeting.",
-              "name": "mdc-presence-icon__meeting"
-            },
-            {
-              "description": "The presence icon for on-call.",
-              "name": "mdc-presence-icon__on-call"
-            },
-            {
-              "description": "The presence icon for on-device.",
-              "name": "mdc-presence-icon__on-device"
-            },
-            {
-              "description": "The presence icon for on-mobile.",
-              "name": "mdc-presence-icon__on-mobile"
-            },
-            {
-              "description": "The presence icon for pause.",
-              "name": "mdc-presence-icon__pause"
-            },
-            {
-              "description": "The presence icon for pto.",
-              "name": "mdc-presence-icon__pto"
-            },
-            {
-              "description": "The presence icon for presenting.",
-              "name": "mdc-presence-icon__presenting"
-            },
-            {
-              "description": "The presence icon for quiet.",
-              "name": "mdc-presence-icon__quiet"
-            },
-            {
-              "description": "The presence icon for scheduled.",
-              "name": "mdc-presence-icon__scheduled"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "PresenceType"
-              },
-              "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": "size",
-              "type": {
-                "text": "PresenceSize"
-              },
-              "description": "Acceptable numeric values include:\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124\n\nPresence icons are minimum 14px in size, meaning 24, 32, and 48 presence\nicons will be no smaller than 14px (for sizes 24, 32, 48).",
-              "default": "32",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "setSize",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "size",
-                  "type": {
-                    "text": "PresenceSize"
-                  }
-                }
-              ]
-            },
-            {
-              "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",
-              "type": {
-                "text": "PresenceType"
-              },
-              "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": "size",
-              "type": {
-                "text": "PresenceSize"
-              },
-              "description": "Acceptable numeric values include:\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124\n\nPresence icons are minimum 14px in size, meaning 24, 32, and 48 presence\nicons will be no smaller than 14px (for sizes 24, 32, 48).",
-              "default": "32",
-              "fieldName": "size"
-            }
-          ],
-          "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 *\n * @csspart presence-content - The presence content.\n * @csspart mdc-presence-icon - The presence icon.\n * @csspart mdc-presence-icon__active - The presence icon for active.\n * @csspart mdc-presence-icon__away - The presence icon for away.\n * @csspart mdc-presence-icon__away-calling - The presence icon for away-calling.\n * @csspart mdc-presence-icon__busy - The presence icon for busy.\n * @csspart mdc-presence-icon__dnd - The presence icon for dnd.\n * @csspart mdc-presence-icon__meeting - The presence icon for meeting.\n * @csspart mdc-presence-icon__on-call - The presence icon for on-call.\n * @csspart mdc-presence-icon__on-device - The presence icon for on-device.\n * @csspart mdc-presence-icon__on-mobile - The presence icon for on-mobile.\n * @csspart mdc-presence-icon__pause - The presence icon for pause.\n * @csspart mdc-presence-icon__pto - The presence icon for pto.\n * @csspart mdc-presence-icon__presenting - The presence icon for presenting.\n * @csspart mdc-presence-icon__quiet - The presence icon for quiet.\n * @csspart mdc-presence-icon__scheduled - The presence icon for scheduled.\n */",
-          "customElement": true
+          "kind": "variable",
+          "name": "TAG_NAME"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "default",
+          "name": "TAG_NAME",
           "declaration": {
-            "name": "Presence",
-            "module": "components/presence/presence.component.js"
+            "name": "TAG_NAME",
+            "module": "components/popover/popover.portal.component.js"
           }
         }
       ]
@@ -33381,7 +33401,7 @@
               "kind": "method",
               "name": "renderLabel",
               "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "description": "renders the label container that contains the label and labelInfoToggleTip.",
               "return": {
                 "type": {
                   "text": ""
@@ -33396,7 +33416,7 @@
               "kind": "method",
               "name": "renderHelperText",
               "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "description": "renders the help-text container that contains the helpertext icon and helpertext.",
               "return": {
                 "type": {
                   "text": ""
@@ -34099,7 +34119,7 @@
               "kind": "method",
               "name": "renderLabel",
               "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "description": "renders the label container that contains the label and labelInfoToggleTip.",
               "return": {
                 "type": {
                   "text": ""
@@ -34114,7 +34134,7 @@
               "kind": "method",
               "name": "renderHelperText",
               "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "description": "renders the help-text container that contains the helpertext icon and helpertext.",
               "return": {
                 "type": {
                   "text": ""
@@ -34823,7 +34843,7 @@
               "kind": "method",
               "name": "renderLabel",
               "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "description": "renders the label container that contains the label and labelInfoToggleTip.",
               "return": {
                 "type": {
                   "text": ""
@@ -34838,7 +34858,7 @@
               "kind": "method",
               "name": "renderHelperText",
               "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "description": "renders the help-text container that contains the helpertext icon and helpertext.",
               "return": {
                 "type": {
                   "text": ""
@@ -35344,7 +35364,7 @@
               "kind": "method",
               "name": "renderLabel",
               "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "description": "renders the label container that contains the label and labelInfoToggleTip.",
               "return": {
                 "type": {
                   "text": ""
@@ -35359,7 +35379,7 @@
               "kind": "method",
               "name": "renderHelperText",
               "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "description": "renders the help-text container that contains the helpertext icon and helpertext.",
               "return": {
                 "type": {
                   "text": ""
@@ -36488,7 +36508,7 @@
               "kind": "method",
               "name": "renderLabel",
               "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "description": "renders the label container that contains the label and labelInfoToggleTip.",
               "return": {
                 "type": {
                   "text": ""
@@ -36503,7 +36523,7 @@
               "kind": "method",
               "name": "renderHelperText",
               "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "description": "renders the help-text container that contains the helpertext icon and helpertext.",
               "return": {
                 "type": {
                   "text": ""
@@ -37842,7 +37862,7 @@
               "kind": "method",
               "name": "renderLabel",
               "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "description": "renders the label container that contains the label and labelInfoToggleTip.",
               "return": {
                 "type": {
                   "text": ""
@@ -37857,7 +37877,7 @@
               "kind": "method",
               "name": "renderHelperText",
               "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "description": "renders the help-text container that contains the helpertext icon and helpertext.",
               "return": {
                 "type": {
                   "text": ""
@@ -42182,7 +42202,7 @@
               "kind": "method",
               "name": "renderLabel",
               "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "description": "renders the label container that contains the label and labelInfoToggleTip.",
               "return": {
                 "type": {
                   "text": ""
@@ -42197,7 +42217,7 @@
               "kind": "method",
               "name": "renderHelperText",
               "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "description": "renders the help-text container that contains the helpertext icon and helpertext.",
               "return": {
                 "type": {
                   "text": ""
@@ -43103,18 +43123,6 @@
               "description": "Height of the toggle when it's size is compact",
               "name": "--mdc-toggle-height-compact"
             },
-            {
-              "description": "Line height of the toggle label",
-              "name": "--mdc-toggle-label-lineheight"
-            },
-            {
-              "description": "Font size of the toggle label",
-              "name": "--mdc-toggle-label-fontsize"
-            },
-            {
-              "description": "Font weight of the toggle label",
-              "name": "--mdc-toggle-label-fontweight"
-            },
             {
               "description": "Color of the toggle label and help text in disabled state",
               "name": "--mdc-toggle-label-color-disabled"
@@ -43542,7 +43550,7 @@
               "kind": "method",
               "name": "renderLabel",
               "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "description": "renders the label container that contains the label and labelInfoToggleTip.",
               "return": {
                 "type": {
                   "text": ""
@@ -43557,7 +43565,7 @@
               "kind": "method",
               "name": "renderHelperText",
               "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "description": "renders the help-text container that contains the helpertext icon and helpertext.",
               "return": {
                 "type": {
                   "text": ""
@@ -43799,7 +43807,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-button\n * @dependency mdc-icon\n * @dependency mdc-statictoggle\n * @dependency mdc-text\n * @dependency mdc-toggletip\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 */",
+          "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-button\n * @dependency mdc-icon\n * @dependency mdc-statictoggle\n * @dependency mdc-text\n * @dependency mdc-toggletip\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-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": [
             {