@momentum-design/components 0.102.1 → 0.102.3

package/dist/custom-elements.json

@@ -1502,67 +1502,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/appheader/appheader.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
-          "name": "Appheader",
-          "cssParts": [
-            {
-              "description": "The main container for styling the header.",
-              "name": "container"
-            },
-            {
-              "description": "The leading section of the header.",
-              "name": "leading-section"
-            },
-            {
-              "description": "The center section of the header.",
-              "name": "center-section"
-            },
-            {
-              "description": "The trailing section of the header.",
-              "name": "trailing-section"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Slot for the leading section (e.g., brand logo, brand name).",
-              "name": "leading"
-            },
-            {
-              "description": "Slot for the center section (e.g., search bar, icons).",
-              "name": "center"
-            },
-            {
-              "description": "Slot for the trailing section (e.g., profile avatar, icons).",
-              "name": "trailing"
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-appheader",
-          "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Appheader",
-            "module": "components/appheader/appheader.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/animation/animation.component.js",
@@ -1775,6 +1714,67 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/appheader/appheader.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
+          "name": "Appheader",
+          "cssParts": [
+            {
+              "description": "The main container for styling the header.",
+              "name": "container"
+            },
+            {
+              "description": "The leading section of the header.",
+              "name": "leading-section"
+            },
+            {
+              "description": "The center section of the header.",
+              "name": "center-section"
+            },
+            {
+              "description": "The trailing section of the header.",
+              "name": "trailing-section"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Slot for the leading section (e.g., brand logo, brand name).",
+              "name": "leading"
+            },
+            {
+              "description": "Slot for the center section (e.g., search bar, icons).",
+              "name": "center"
+            },
+            {
+              "description": "Slot for the trailing section (e.g., profile avatar, icons).",
+              "name": "trailing"
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-appheader",
+          "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Appheader",
+            "module": "components/appheader/appheader.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/avatar/avatar.component.js",
@@ -20655,6 +20655,147 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/menusection/menusection.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-menusection` is a container element used to group a set of menu items.\n\nThis component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.\n\n- If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n  only one radio item can be selected at a time.\n- If `menuitemcheckbox` components are included, their checked state can be toggled independently.",
+          "name": "MenuSection",
+          "slots": [
+            {
+              "description": "Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "The aria-label for the section.\nThis is used for accessibility purposes to describe the section.\nIf not provided, it defaults to the `headerText`.",
+              "attribute": "aria-label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "headerText",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "The primary headerText of the list item.\nThis appears on the leading side of the list item.",
+              "attribute": "header-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "prefixIcon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon rendered before the text\n\nIf not provided, no icon will be rendered and text will be aligned to the start.",
+              "attribute": "prefix-icon"
+            },
+            {
+              "kind": "field",
+              "name": "showDivider",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to show a divider below the section header.\nThis is useful for visually separating sections in the menu.",
+              "attribute": "show-divider",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dividerVariant",
+              "description": "The variant of the divider.\nCan be set to 'solid' or 'gradient'.\n\nKeep 'solid' if used in MenuPopovers, as it is the default style.",
+              "default": "'solid'",
+              "attribute": "divider-variant",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "renderHeader",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.",
+              "name": "change",
+              "reactName": "onChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "The aria-label for the section.\nThis is used for accessibility purposes to describe the section.\nIf not provided, it defaults to the `headerText`.",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "header-text",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "The primary headerText of the list item.\nThis appears on the leading side of the list item.",
+              "fieldName": "headerText"
+            },
+            {
+              "name": "prefix-icon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon rendered before the text\n\nIf not provided, no icon will be rendered and text will be aligned to the start.",
+              "fieldName": "prefixIcon"
+            },
+            {
+              "name": "show-divider",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to show a divider below the section header.\nThis is useful for visually separating sections in the menu.",
+              "fieldName": "showDivider"
+            },
+            {
+              "name": "divider-variant",
+              "description": "The variant of the divider.\nCan be set to 'solid' or 'gradient'.\n\nKeep 'solid' if used in MenuPopovers, as it is the default style.",
+              "default": "'solid'",
+              "fieldName": "dividerVariant"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-menusection",
+          "jsDoc": "/**\n * `mdc-menusection` is a container element used to group a set of menu items.\n *\n * This component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.\n *\n * - If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n *   only one radio item can be selected at a time.\n * - If `menuitemcheckbox` components are included, their checked state can be toggled independently.\n *\n * @tagname mdc-menusection\n *\n * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`\n *\n * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "MenuSection",
+            "module": "components/menusection/menusection.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/menupopover/menupopover.component.js",
@@ -22799,147 +22940,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/menusection/menusection.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-menusection` is a container element used to group a set of menu items.\n\nThis component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.\n\n- If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n  only one radio item can be selected at a time.\n- If `menuitemcheckbox` components are included, their checked state can be toggled independently.",
-          "name": "MenuSection",
-          "slots": [
-            {
-              "description": "Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "The aria-label for the section.\nThis is used for accessibility purposes to describe the section.\nIf not provided, it defaults to the `headerText`.",
-              "attribute": "aria-label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "headerText",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "The primary headerText of the list item.\nThis appears on the leading side of the list item.",
-              "attribute": "header-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "prefixIcon",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon rendered before the text\n\nIf not provided, no icon will be rendered and text will be aligned to the start.",
-              "attribute": "prefix-icon"
-            },
-            {
-              "kind": "field",
-              "name": "showDivider",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether to show a divider below the section header.\nThis is useful for visually separating sections in the menu.",
-              "attribute": "show-divider",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dividerVariant",
-              "description": "The variant of the divider.\nCan be set to 'solid' or 'gradient'.\n\nKeep 'solid' if used in MenuPopovers, as it is the default style.",
-              "default": "'solid'",
-              "attribute": "divider-variant",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "renderHeader",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.",
-              "name": "change",
-              "reactName": "onChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "The aria-label for the section.\nThis is used for accessibility purposes to describe the section.\nIf not provided, it defaults to the `headerText`.",
-              "fieldName": "ariaLabel"
-            },
-            {
-              "name": "header-text",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "The primary headerText of the list item.\nThis appears on the leading side of the list item.",
-              "fieldName": "headerText"
-            },
-            {
-              "name": "prefix-icon",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon rendered before the text\n\nIf not provided, no icon will be rendered and text will be aligned to the start.",
-              "fieldName": "prefixIcon"
-            },
-            {
-              "name": "show-divider",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether to show a divider below the section header.\nThis is useful for visually separating sections in the menu.",
-              "fieldName": "showDivider"
-            },
-            {
-              "name": "divider-variant",
-              "description": "The variant of the divider.\nCan be set to 'solid' or 'gradient'.\n\nKeep 'solid' if used in MenuPopovers, as it is the default style.",
-              "default": "'solid'",
-              "fieldName": "dividerVariant"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-menusection",
-          "jsDoc": "/**\n * `mdc-menusection` is a container element used to group a set of menu items.\n *\n * This component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.\n *\n * - If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n *   only one radio item can be selected at a time.\n * - If `menuitemcheckbox` components are included, their checked state can be toggled independently.\n *\n * @tagname mdc-menusection\n *\n * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`\n *\n * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "MenuSection",
-            "module": "components/menusection/menusection.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/navmenuitem/navmenuitem.component.js",

package/dist/react/index.d.ts

@@ -2,8 +2,8 @@ export { default as Accordion } from './accordion';
 export { default as AccordionButton } from './accordionbutton';
 export { default as AccordionGroup } from './accordiongroup';
 export { default as AlertChip } from './alertchip';
-export { default as Appheader } from './appheader';
 export { default as Animation } from './animation';
+export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
@@ -40,8 +40,8 @@ export { default as MenuBar } from './menubar';
 export { default as MenuItem } from './menuitem';
 export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItemRadio } from './menuitemradio';
-export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
+export { default as MenuPopover } from './menupopover';
 export { default as NavMenuItem } from './navmenuitem';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';

package/dist/react/index.js

@@ -2,8 +2,8 @@ export { default as Accordion } from './accordion';
 export { default as AccordionButton } from './accordionbutton';
 export { default as AccordionGroup } from './accordiongroup';
 export { default as AlertChip } from './alertchip';
-export { default as Appheader } from './appheader';
 export { default as Animation } from './animation';
+export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
@@ -40,8 +40,8 @@ export { default as MenuBar } from './menubar';
 export { default as MenuItem } from './menuitem';
 export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItemRadio } from './menuitemradio';
-export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
+export { default as MenuPopover } from './menupopover';
 export { default as NavMenuItem } from './navmenuitem';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';

package/dist/utils/mixins/FocusTrapMixin.js

@@ -248,7 +248,13 @@ export const FocusTrapMixin = (superClass) => {
             if (root instanceof HTMLElement && this.isFocusable(root)) {
                 matches.add(root);
             }
-            const children = Array.from(root.children);
+            let children = [];
+            if (root.children.length) {
+                children = Array.from(root.children);
+            }
+            else if (root instanceof HTMLElement && root.shadowRoot) {
+                children = Array.from(root.shadowRoot.children);
+            }
             children.forEach((child) => {
                 const element = child;
                 if (this.isFocusable(element)) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.102.1",
+  "version": "0.102.3",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"