@momentum-design/components 0.102.3 → 0.102.5

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

@@ -22,6 +22,7 @@ declare const Input_base: import("../../utils/mixins/index.types").Constructor<i
  * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).
  * @event focus - (React: onFocus) This event is dispatched when the input receives focus.
  * @event blur - (React: onBlur) This event is dispatched when the input loses focus.
+ * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
  *
  * @dependency mdc-icon
  * @dependency mdc-text

package/dist/components/input/input.component.js

@@ -36,6 +36,7 @@ import styles from './input.styles';
  * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).
  * @event focus - (React: onFocus) This event is dispatched when the input receives focus.
  * @event blur - (React: onBlur) This event is dispatched when the input loses focus.
+ * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
  *
  * @dependency mdc-icon
  * @dependency mdc-text
@@ -252,6 +253,7 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         this.value = '';
         // focus the input field after clearing the text
         (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
+        this.dispatchEvent(new CustomEvent('clear', { bubbles: true, composed: true }));
     }
     /**
      * Renders the trailing button to clear the input field if the trailingButton is set to true.

package/dist/components/input/input.types.d.ts

@@ -1,12 +1,16 @@
-import type { ValueOf } from '../../utils/types';
+import type { TypedEvent, ValueOf } from '../../utils/types';
+import type Input from './input.component';
 import { AUTO_CAPITALIZE, AUTO_COMPLETE, INPUT_TYPE } from './input.constants';
 type AutoCapitalizeType = ValueOf<typeof AUTO_CAPITALIZE>;
 type AutoCompleteType = ValueOf<typeof AUTO_COMPLETE>;
 type InputType = ValueOf<typeof INPUT_TYPE>;
+type InputClearEvent = TypedEvent<Input>;
+type InputChangeEvent = TypedEvent<Input>;
 interface Events {
     onInputEvent: InputEvent;
-    onChangeEvent: Event;
+    onChangeEvent: InputChangeEvent;
     onFocusEvent: FocusEvent;
     onBlurEvent: FocusEvent;
+    onClearEvent: InputClearEvent;
 }
-export type { AutoCapitalizeType, AutoCompleteType, InputType, Events };
+export type { AutoCapitalizeType, AutoCompleteType, InputType, InputClearEvent, InputChangeEvent, Events };

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/components/searchfield/searchfield.component.d.ts

@@ -1,7 +1,7 @@
 import { CSSResult } from 'lit';
 import Input from '../input/input.component';
 /**
- * searchfield component is used as an input field for search functionality.
+ * `mdc-searchfield` component is used as an input field for search functionality.
  *
  * It supports `mdc-inputchip` as filters.
  *
@@ -9,8 +9,13 @@ import Input from '../input/input.component';
  *
  * @tagname mdc-searchfield
  *
- * @slot filters - Slot for input chips
+ * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).
+ * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).
+ * @event focus - (React: onFocus) This event is dispatched when the input receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the input loses focus.
+ * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
  *
+ * @slot filters - Slot for input chips
  */
 declare class Searchfield extends Input {
     inputChips?: Array<HTMLElement>;

package/dist/components/searchfield/searchfield.component.js

@@ -15,7 +15,7 @@ import { KEYS } from '../../utils/keys';
 import styles from './searchfield.styles';
 import { DEFAULTS } from './searchfield.constants';
 /**
- * searchfield component is used as an input field for search functionality.
+ * `mdc-searchfield` component is used as an input field for search functionality.
  *
  * It supports `mdc-inputchip` as filters.
  *
@@ -23,8 +23,13 @@ import { DEFAULTS } from './searchfield.constants';
  *
  * @tagname mdc-searchfield
  *
- * @slot filters - Slot for input chips
+ * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).
+ * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).
+ * @event focus - (React: onFocus) This event is dispatched when the input receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the input loses focus.
+ * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
  *
+ * @slot filters - Slot for input chips
  */
 class Searchfield extends Input {
     constructor() {
@@ -46,7 +51,7 @@ class Searchfield extends Input {
      */
     handleKeyDown(event) {
         super.handleKeyDown(event);
-        if (event.key === 'Escape') {
+        if (event.key === KEYS.ESCAPE) {
             this.clearInputText();
         }
     }

package/dist/components/searchfield/searchfield.types.d.ts

@@ -0,0 +1,2 @@
+import type { Events } from '../input/input.types';
+export type { Events };

package/dist/components/searchfield/searchfield.types.js

@@ -0,0 +1 @@
+export {};