@momentum-design/components 0.102.2 → 0.102.3

package/dist/custom-elements.json

@@ -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

@@ -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

@@ -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.2",
+  "version": "0.102.3",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"