@momentum-design/components 0.102.3 → 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];