@momentum-design/components 0.102.2 → 0.102.4

package/dist/components/list/index.d.ts

@@ -1,5 +1,4 @@
 import List from './list.component';
-import '../text';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-list']: List;

package/dist/components/list/index.js

@@ -1,5 +1,4 @@
 import List from './list.component';
 import { TAG_NAME } from './list.constants';
-import '../text';
 List.register(TAG_NAME);
 export default List;

package/dist/components/list/list.component.d.ts

@@ -1,29 +1,26 @@
 import type { CSSResult } from 'lit';
 import { Component } from '../../models';
-import type { RoleType } from '../../utils/roles';
-declare const List_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof Component;
 /**
  * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.
  *
+ * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.
+ * `mdc-listitem` components can be placed in the default slot.
+ *
  * @tagname mdc-list
  *
- * @dependency mdc-text
+ * @slot default - This is a default/unnamed slot, where listitems can be placed.
+ * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.
  *
- * @slot default - This is a default/unnamed slot
+ * @csspart container - The container slot around the list items
  */
-declare class List extends List_base {
+declare class List extends Component {
     /**
      * @internal
      * Get all listitem elements which are not disabled in the list.
      */
-    listItems: Array<HTMLElement>;
-    /**
-     * The header text of the list.
-     */
-    headerText?: string;
-    /** @internal */
-    protected dataRole: RoleType;
+    private listItems;
     constructor();
+    connectedCallback(): void;
     /**
      * Handles the keydown event on the list element.
      * If the key is 'ArrowUp' or 'ArrowDown', it focuses to the previous or next list item

package/dist/components/list/list.component.js

@@ -7,32 +7,36 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { html, nothing } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
+import { html } from 'lit';
+import { queryAssignedElements } from 'lit/decorators.js';
 import { Component } from '../../models';
 import { KEYS } from '../../utils/keys';
-import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { ROLE } from '../../utils/roles';
 import { TAG_NAME as LISTITEM_TAGNAME } from '../listitem/listitem.constants';
-import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
-import { HEADER_ID } from './list.constants';
 import styles from './list.styles';
 /**
  * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.
  *
+ * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.
+ * `mdc-listitem` components can be placed in the default slot.
+ *
  * @tagname mdc-list
  *
- * @dependency mdc-text
+ * @slot default - This is a default/unnamed slot, where listitems can be placed.
+ * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.
  *
- * @slot default - This is a default/unnamed slot
+ * @csspart container - The container slot around the list items
  */
-class List extends DataAriaLabelMixin(Component) {
+class List extends Component {
     constructor() {
         super();
-        /** @internal */
-        this.dataRole = ROLE.LIST;
         this.addEventListener('keydown', this.handleKeyDown);
     }
+    connectedCallback() {
+        super.connectedCallback();
+        // Set the role attribute for accessibility.
+        this.setAttribute('role', ROLE.LIST);
+    }
     /**
      * Handles the keydown event on the list element.
      * If the key is 'ArrowUp' or 'ArrowDown', it focuses to the previous or next list item
@@ -109,27 +113,10 @@ class List extends DataAriaLabelMixin(Component) {
         this.resetTabIndexAndSetActiveTabIndex(0);
     }
     render() {
-        var _a;
-        const headerText = this.headerText
-            ? html `
-          <mdc-text
-            id="${HEADER_ID}"
-            part="header-text"
-            type="${TYPE.BODY_MIDSIZE_BOLD}"
-            tagname="${VALID_TEXT_TAGS.SPAN}"
-            >${this.headerText}</mdc-text
-          >
-        `
-            : nothing;
         return html `
-      <div
-        role="${this.dataRole}"
-        aria-labelledby="${this.headerText ? HEADER_ID : ''}"
-        aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
-      >
-        ${headerText}
-        <slot role="presentation" @click="${this.handleMouseClick}"></slot>
-      </div>
+      <slot name="list-header"></slot>
+      <!-- make the container slot role presentation to keep it ignored in a11y tree -->
+      <slot part="container" @click="${this.handleMouseClick}" role="presentation"></slot>
     `;
     }
 }
@@ -138,8 +125,4 @@ __decorate([
     queryAssignedElements({ selector: `${LISTITEM_TAGNAME}:not([disabled])` }),
     __metadata("design:type", Array)
 ], List.prototype, "listItems", void 0);
-__decorate([
-    property({ type: String, attribute: 'header-text', reflect: true }),
-    __metadata("design:type", String)
-], List.prototype, "headerText", void 0);
 export default List;

package/dist/components/list/list.styles.js

@@ -1,7 +1,14 @@
 import { css } from 'lit';
 const styles = css `
-  :host::part(header-text) {
-    padding: 0.5rem 0.75rem;
+  :host {
+    display: flex;
+    flex-direction: column;
+  }
+
+  :host::part(container) {
+    display: flex;
+    flex-direction: column;
+    gap: 0rem;
   }
 `;
 export default [styles];

package/dist/custom-elements.json

@@ -477,6 +477,157 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/accordiongroup/accordiongroup.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
+          "name": "AccordionGroup",
+          "cssProperties": [
+            {
+              "description": "The border color of the entire accordiongroup",
+              "name": "--mdc-accordiongroup-border-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot can contain the `accordion` or `accordionbutton` components.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'stacked'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "allowMultiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, multiple accordion items can be visible at the same time.",
+              "attribute": "allow-multiple",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleAccordionExpanded",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The event object from the 'shown' event."
+                }
+              ],
+              "description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
+            },
+            {
+              "kind": "method",
+              "name": "setChildrenAccordionAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "attributeName",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The name of the attribute to set."
+                },
+                {
+                  "name": "attributeValue",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The value to set the attribute to."
+                }
+              ],
+              "description": "Sets the given attribute on all child accordion or accordionbutton components."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "fieldName": "size"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'stacked'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "allow-multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, multiple accordion items can be visible at the same time.",
+              "fieldName": "allowMultiple"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-accordiongroup",
+          "jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "AccordionGroup",
+            "module": "components/accordiongroup/accordiongroup.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/accordionbutton/accordionbutton.component.js",
@@ -817,157 +968,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/accordiongroup/accordiongroup.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
-          "name": "AccordionGroup",
-          "cssProperties": [
-            {
-              "description": "The border color of the entire accordiongroup",
-              "name": "--mdc-accordiongroup-border-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot can contain the `accordion` or `accordionbutton` components.",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'stacked'",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "allowMultiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
-              "attribute": "allow-multiple",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleAccordionExpanded",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  },
-                  "description": "The event object from the 'shown' event."
-                }
-              ],
-              "description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
-            },
-            {
-              "kind": "method",
-              "name": "setChildrenAccordionAttributes",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "attributeName",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The name of the attribute to set."
-                },
-                {
-                  "name": "attributeValue",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The value to set the attribute to."
-                }
-              ],
-              "description": "Sets the given attribute on all child accordion or accordionbutton components."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "fieldName": "size"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'stacked'",
-              "fieldName": "variant"
-            },
-            {
-              "name": "allow-multiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
-              "fieldName": "allowMultiple"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-accordiongroup",
-          "jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "AccordionGroup",
-            "module": "components/accordiongroup/accordiongroup.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/alertchip/alertchip.component.js",
@@ -16527,25 +16527,25 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.",
+          "description": "mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n`mdc-listitem` components can be placed in the default slot.",
           "name": "List",
+          "cssParts": [
+            {
+              "description": "The container slot around the list items",
+              "name": "container"
+            }
+          ],
           "slots": [
             {
-              "description": "This is a default/unnamed slot",
+              "description": "This is a default/unnamed slot, where listitems can be placed.",
               "name": "default"
+            },
+            {
+              "description": "This slot is used to pass a header for the list, which can be a `mdc-listheader` component.",
+              "name": "list-header"
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "headerText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The header text of the list.",
-              "attribute": "header-text",
-              "reflects": true
-            },
             {
               "kind": "method",
               "name": "handleKeyDown",
@@ -16654,50 +16654,6 @@
                 }
               ],
               "description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard."
-            },
-            {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "header-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The header text of the list.",
-              "fieldName": "headerText"
-            },
-            {
-              "name": "data-aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
             }
           ],
           "superclass": {
@@ -16705,7 +16661,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-list",
-          "jsDoc": "/**\n * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n *\n * @tagname mdc-list\n *\n * @dependency mdc-text\n *\n * @slot default - This is a default/unnamed slot\n */",
+          "jsDoc": "/**\n * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n * `mdc-listitem` components can be placed in the default slot.\n *\n * @tagname mdc-list\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container slot around the list items\n */",
           "customElement": true
         }
       ],

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
 export { default as Accordion } from './accordion';
-export { default as AccordionButton } from './accordionbutton';
 export { default as AccordionGroup } from './accordiongroup';
+export { default as AccordionButton } from './accordionbutton';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';

package/dist/react/index.js

@@ -1,6 +1,6 @@
 export { default as Accordion } from './accordion';
-export { default as AccordionButton } from './accordionbutton';
 export { default as AccordionGroup } from './accordiongroup';
+export { default as AccordionButton } from './accordionbutton';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';

package/dist/react/list/index.d.ts

@@ -2,11 +2,15 @@ import Component from '../../components/list';
 /**
  * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.
  *
+ * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.
+ * `mdc-listitem` components can be placed in the default slot.
+ *
  * @tagname mdc-list
  *
- * @dependency mdc-text
+ * @slot default - This is a default/unnamed slot, where listitems can be placed.
+ * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.
  *
- * @slot default - This is a default/unnamed slot
+ * @csspart container - The container slot around the list items
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/list/index.js

@@ -5,11 +5,15 @@ import { TAG_NAME } from '../../components/list/list.constants';
 /**
  * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.
  *
+ * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.
+ * `mdc-listitem` components can be placed in the default slot.
+ *
  * @tagname mdc-list
  *
- * @dependency mdc-text
+ * @slot default - This is a default/unnamed slot, where listitems can be placed.
+ * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.
  *
- * @slot default - This is a default/unnamed slot
+ * @csspart container - The container slot around the list items
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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.4",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"