@momentum-design/components 0.28.8 → 0.28.10

package/dist/components/checkbox/checkbox.component.js

@@ -10,6 +10,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { v4 as uuidv4 } from 'uuid';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
@@ -78,6 +79,7 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
         };
         // Checkbox does not contain helpTextType property.
         this.helpTextType = undefined;
+        this.id = `mdc-input-${uuidv4()}`;
     }
     /**
      * Updates the form value to reflect the current state of the checkbox.

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

@@ -117,6 +117,7 @@ declare class Input extends Input_base implements AssociatedFormControl {
      * @default ''
      */
     clearAriaLabel: string;
+    constructor();
     connectedCallback(): void;
     /** @internal */
     formResetCallback(): void;

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

@@ -10,6 +10,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { v4 as uuidv4 } from 'uuid';
 import styles from './input.styles';
 import FormfieldWrapper from '../formfieldwrapper';
 import { AUTO_CAPITALIZE, DEFAULTS, PREFIX_TEXT_OPTIONS } from './input.constants';
@@ -59,7 +60,7 @@ import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
  */
 class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     constructor() {
-        super(...arguments);
+        super();
         /**
          * The placeholder text that is displayed when the input field is empty.
          */
@@ -93,6 +94,7 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
          * @default ''
          */
         this.clearAriaLabel = '';
+        this.id = `mdc-input-${uuidv4()}`;
     }
     connectedCallback() {
         super.connectedCallback();

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

@@ -0,0 +1,8 @@
+import List from './list.component';
+import '../text';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-list']: List;
+    }
+}
+export default List;

package/dist/components/list/index.js

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,64 @@
+import type { CSSResult } from 'lit';
+import { Component } from '../../models';
+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.
+ *
+ * @tagname mdc-list
+ *
+ * @dependency mdc-text
+ *
+ * @slot default - This is a default/unnamed slot
+ */
+declare class List extends List_base {
+    listItems: Array<HTMLElement>;
+    /**
+     * The header text of the list.
+     */
+    headerText?: string;
+    constructor();
+    /**
+     * Handles the keydown event on the list element.
+     * If the key is 'ArrowUp' or 'ArrowDown', it focuses to the previous or next list item
+     * and sets the active tabindex of the list item.
+     * Prevents the default event behavior.
+     * @param event - The keyboard event.
+     */
+    private handleKeyDown;
+    /**
+     * Returns the index of the given target in the listItems array.
+     * If the target is not a list item, but a child element of a list item,
+     * it returns the index of the parent list item.
+     * @param target - The target element to find the index of.
+     * @returns The index of the target element in the listItems array.
+     */
+    private getCurrentIndex;
+    /**
+     * Calculates a new index based on the pressed keyboard key.
+     * Supports navigation keys for moving focus within a list.
+     * @param key - The key that was pressed.
+     * @param currentIndex - The current index of the focused list item.
+     * @param wrappedDivsCount - The total number of list items.
+     * @returns The new index to focus on, or undefined if the key is not supported.
+     */
+    private getNewIndexBasedOnKey;
+    /**
+     * Handles the mouse click event on the list element.
+     * Finds the index of the target element in the list items array and calls
+     * `resetTabIndexAndSetActiveTabIndex` with that index.
+     * @param event - The mouse event.
+     */
+    private handleMouseClick;
+    /**
+     * Resets all list items tabindex to -1 and sets the tabindex of the
+     * element at the given index to 0, effectively setting the active
+     * element. This is used when navigating the list via keyboard.
+     *
+     * @param newIndex - The index of the new active element in the list.
+     */
+    private resetTabIndexAndSetActiveTabIndex;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default List;

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

@@ -0,0 +1,138 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 { Component } from '../../models';
+import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { TAG_NAME as LISTITEM_TAGNAME } from '../listitem/listitem.constants';
+import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+import { HEADER_ID, KEYS } 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.
+ *
+ * @tagname mdc-list
+ *
+ * @dependency mdc-text
+ *
+ * @slot default - This is a default/unnamed slot
+ */
+class List extends DataAriaLabelMixin(Component) {
+    constructor() {
+        super();
+        this.addEventListener('keydown', this.handleKeyDown);
+    }
+    /**
+     * Handles the keydown event on the list element.
+     * If the key is 'ArrowUp' or 'ArrowDown', it focuses to the previous or next list item
+     * and sets the active tabindex of the list item.
+     * Prevents the default event behavior.
+     * @param event - The keyboard event.
+     */
+    handleKeyDown(event) {
+        var _a;
+        const currentIndex = this.getCurrentIndex(event.target);
+        const newIndex = this.getNewIndexBasedOnKey(event.key, currentIndex, this.listItems.length);
+        if (newIndex !== undefined) {
+            (_a = this.listItems[newIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+            this.resetTabIndexAndSetActiveTabIndex(newIndex);
+        }
+    }
+    /**
+     * Returns the index of the given target in the listItems array.
+     * If the target is not a list item, but a child element of a list item,
+     * it returns the index of the parent list item.
+     * @param target - The target element to find the index of.
+     * @returns The index of the target element in the listItems array.
+     */
+    getCurrentIndex(target) {
+        return this.listItems.findIndex((node) => node === target || node === target.parentElement);
+    }
+    /**
+     * Calculates a new index based on the pressed keyboard key.
+     * Supports navigation keys for moving focus within a list.
+     * @param key - The key that was pressed.
+     * @param currentIndex - The current index of the focused list item.
+     * @param wrappedDivsCount - The total number of list items.
+     * @returns The new index to focus on, or undefined if the key is not supported.
+     */
+    getNewIndexBasedOnKey(key, currentIndex, wrappedDivsCount) {
+        switch (key) {
+            case KEYS.ARROW_DOWN:
+                return (currentIndex + 1) % wrappedDivsCount;
+            case KEYS.ARROW_UP:
+                return (currentIndex - 1 + wrappedDivsCount) % wrappedDivsCount;
+            case KEYS.HOME:
+                return 0;
+            case KEYS.END:
+                return wrappedDivsCount - 1;
+            default:
+                return undefined;
+        }
+    }
+    /**
+     * Handles the mouse click event on the list element.
+     * Finds the index of the target element in the list items array and calls
+     * `resetTabIndexAndSetActiveTabIndex` with that index.
+     * @param event - The mouse event.
+     */
+    handleMouseClick(event) {
+        const newIndex = this.getCurrentIndex(event.target);
+        this.resetTabIndexAndSetActiveTabIndex(newIndex);
+    }
+    /**
+     * Resets all list items tabindex to -1 and sets the tabindex of the
+     * element at the given index to 0, effectively setting the active
+     * element. This is used when navigating the list via keyboard.
+     *
+     * @param newIndex - The index of the new active element in the list.
+     */
+    resetTabIndexAndSetActiveTabIndex(newIndex) {
+        this.listItems.forEach((node, index) => {
+            const newTabindex = newIndex === index ? '0' : '-1';
+            node === null || node === void 0 ? void 0 : node.setAttribute('tabindex', newTabindex);
+        });
+    }
+    firstUpdated() {
+        // For the first, we set the first element only as active.
+        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="list"
+        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>
+    `;
+    }
+}
+List.styles = [...Component.styles, ...styles];
+__decorate([
+    queryAssignedElements({ selector: LISTITEM_TAGNAME }),
+    __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.constants.d.ts

@@ -0,0 +1,9 @@
+declare const TAG_NAME: "mdc-list";
+declare const KEYS: {
+    readonly ARROW_DOWN: "ArrowDown";
+    readonly ARROW_UP: "ArrowUp";
+    readonly HOME: "Home";
+    readonly END: "End";
+};
+declare const HEADER_ID = "header-id";
+export { TAG_NAME, KEYS, HEADER_ID };

package/dist/components/list/list.constants.js

@@ -0,0 +1,10 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('list');
+const KEYS = {
+    ARROW_DOWN: 'ArrowDown',
+    ARROW_UP: 'ArrowUp',
+    HOME: 'Home',
+    END: 'End',
+};
+const HEADER_ID = 'header-id';
+export { TAG_NAME, KEYS, HEADER_ID };

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

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

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

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

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

@@ -0,0 +1,8 @@
+import ListItem from './listitem.component';
+import '../text';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-listitem']: ListItem;
+    }
+}
+export default ListItem;

package/dist/components/listitem/index.js

@@ -0,0 +1,5 @@
+import ListItem from './listitem.component';
+import { TAG_NAME } from './listitem.constants';
+import '../text';
+ListItem.register(TAG_NAME);
+export default ListItem;

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

@@ -0,0 +1,90 @@
+import type { CSSResult, PropertyValues } from 'lit';
+import { TemplateResult } from 'lit';
+import { Component } from '../../models';
+import type { ListItemVariants } from './listitem.types';
+declare const ListItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & typeof Component;
+/**
+ * mdc-listitem component is used to display a label with different types of controls.
+ * There can be three types of controls, a radio button, a checkbox on the
+ * leading side and a toggle on the trailing side.
+ * The list item can contain an avatar on the leading side and a badge on the trailing side.
+ * Additionally, the list item can contain a side header and a subline text.
+ *
+ * The leading and trailing slots can be used to display controls and text. <br/>
+ * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>
+ * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.
+ *
+ * @tagname mdc-listitem
+ *
+ * @dependency mdc-text
+ *
+ * @slot leading-controls - slot for list item controls to appear of leading end.
+ * @slot leading-text-primary-label - slot for list item primary label.
+ * @slot leading-text-secondary-label - slot for list item secondary label.
+ * @slot leading-text-tertiary-label - slot for list item tertiary label.
+ * @slot trailing-text-side-header - slot for list item side header text.
+ * @slot trailing-text-subline - slot for list item subline text.
+ * @slot trailing-controls - slot for list item controls to appear of trailing end.
+ *
+ * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.
+ * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.
+ * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.
+ * @cssproperty --mdc-listitem-primary-label-color
+ *  - Allows customization of the primary label, side header and subline text slot color.
+ * @cssproperty --mdc-listitem-secondary-label-color
+ *  - Allows customization of the secondary and teritary label text slot color.
+ */
+declare class ListItem extends ListItem_base {
+    leadingControlsSlot: Array<HTMLElement>;
+    trailingControlsSlot: Array<HTMLElement>;
+    /**
+     * The variant of the list item. It can be a pill, rectangle or a full-width.
+     * @default 'full-width'
+     */
+    variant: ListItemVariants;
+    /**
+     * The primary label of the list item.
+     * This appears on the leading side of the list item.
+     */
+    label?: string;
+    /**
+     * The secondary label of the list item.
+     * This appears on the leading side of the list item.
+     */
+    secondaryLabel?: string;
+    /**
+     * The tertiary label of the list item.
+     * This appears on the leading side of the list item.
+     */
+    tertiaryLabel?: string;
+    /**
+     * The header text of the list item.
+     * This appears on the trailing side of the list item.
+     */
+    sideHeaderText?: string;
+    /**
+     * The subline text of the list item.
+     * This appears on the trailing side of the list item.
+     */
+    sublineText?: string;
+    constructor();
+    /**
+     * Generates a template for a text slot with the specified content.
+     *
+     * @param slotName - The name of the slot to be used.
+     * @param type - The type of the text element.
+     * @param content - The text content to be displayed within the slot.
+     * @returns A TemplateResult containing a slot with an `mdc-text` element of type BODY_SMALL_REGULAR.
+     */
+    private getText;
+    /**
+     * Disable or enable all slotted elements in the leading and trailing slots.
+     * This is useful when the list item is disabled, to prevent the user from interacting with the controls.
+     * @param disabled - Whether to disable or enable the controls.
+     */
+    private disableSlottedChildren;
+    update(changedProperties: PropertyValues): void;
+    render(): TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default ListItem;

package/dist/components/listitem/listitem.component.js

@@ -0,0 +1,153 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 { Component } from '../../models';
+import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
+import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+import { DEFAULTS } from './listitem.constants';
+import styles from './listitem.styles';
+/**
+ * mdc-listitem component is used to display a label with different types of controls.
+ * There can be three types of controls, a radio button, a checkbox on the
+ * leading side and a toggle on the trailing side.
+ * The list item can contain an avatar on the leading side and a badge on the trailing side.
+ * Additionally, the list item can contain a side header and a subline text.
+ *
+ * The leading and trailing slots can be used to display controls and text. <br/>
+ * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>
+ * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.
+ *
+ * @tagname mdc-listitem
+ *
+ * @dependency mdc-text
+ *
+ * @slot leading-controls - slot for list item controls to appear of leading end.
+ * @slot leading-text-primary-label - slot for list item primary label.
+ * @slot leading-text-secondary-label - slot for list item secondary label.
+ * @slot leading-text-tertiary-label - slot for list item tertiary label.
+ * @slot trailing-text-side-header - slot for list item side header text.
+ * @slot trailing-text-subline - slot for list item subline text.
+ * @slot trailing-controls - slot for list item controls to appear of trailing end.
+ *
+ * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.
+ * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.
+ * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.
+ * @cssproperty --mdc-listitem-primary-label-color
+ *  - Allows customization of the primary label, side header and subline text slot color.
+ * @cssproperty --mdc-listitem-secondary-label-color
+ *  - Allows customization of the secondary and teritary label text slot color.
+ */
+class ListItem extends DataAriaLabelMixin(DisabledMixin(TabIndexMixin(Component))) {
+    constructor() {
+        super();
+        /**
+         * The variant of the list item. It can be a pill, rectangle or a full-width.
+         * @default 'full-width'
+         */
+        this.variant = DEFAULTS.VARIANT;
+        this.role = 'listitem';
+    }
+    /**
+     * Generates a template for a text slot with the specified content.
+     *
+     * @param slotName - The name of the slot to be used.
+     * @param type - The type of the text element.
+     * @param content - The text content to be displayed within the slot.
+     * @returns A TemplateResult containing a slot with an `mdc-text` element of type BODY_SMALL_REGULAR.
+     */
+    getText(slotName, type, content) {
+        if (!content) {
+            return nothing;
+        }
+        return html `
+      <slot name="${slotName}">
+        <mdc-text part="${slotName}" type="${type}" tagname="${VALID_TEXT_TAGS.SPAN}">${content}</mdc-text>
+      </slot>
+    `;
+    }
+    /**
+     * Disable or enable all slotted elements in the leading and trailing slots.
+     * This is useful when the list item is disabled, to prevent the user from interacting with the controls.
+     * @param disabled - Whether to disable or enable the controls.
+     */
+    disableSlottedChildren(disabled) {
+        [...this.leadingControlsSlot, ...this.trailingControlsSlot].forEach((element) => {
+            if (disabled) {
+                element.setAttribute('disabled', '');
+            }
+            else {
+                element.removeAttribute('disabled');
+            }
+        });
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('disabled')) {
+            this.tabIndex = this.disabled ? -1 : 0;
+            this.disableSlottedChildren(this.disabled);
+        }
+    }
+    render() {
+        return html `
+      <div part="leading">
+        <slot name="leading-controls"></slot>
+        <div part="leading-text">
+          ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
+          ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
+          ${this.getText('leading-text-tertiary-label', TYPE.BODY_SMALL_REGULAR, this.tertiaryLabel)}
+        </div>
+      </div>
+      <div part="trailing">
+        <div part="trailing-text">
+          ${this.getText('trailing-text-side-header', TYPE.BODY_MIDSIZE_REGULAR, this.sideHeaderText)}
+          ${this.getText('trailing-text-subline', TYPE.BODY_SMALL_REGULAR, this.sublineText)}
+        </div>
+        <slot name="trailing-controls"></slot>
+      </div>
+    `;
+    }
+}
+ListItem.styles = [...Component.styles, ...styles];
+__decorate([
+    queryAssignedElements({ slot: 'leading-controls' }),
+    __metadata("design:type", Array)
+], ListItem.prototype, "leadingControlsSlot", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'trailing-controls' }),
+    __metadata("design:type", Array)
+], ListItem.prototype, "trailingControlsSlot", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], ListItem.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], ListItem.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'secondary-label' }),
+    __metadata("design:type", String)
+], ListItem.prototype, "secondaryLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'tertiary-label' }),
+    __metadata("design:type", String)
+], ListItem.prototype, "tertiaryLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'side-header-text' }),
+    __metadata("design:type", String)
+], ListItem.prototype, "sideHeaderText", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'subline-text' }),
+    __metadata("design:type", String)
+], ListItem.prototype, "sublineText", void 0);
+export default ListItem;

package/dist/components/listitem/listitem.constants.d.ts

@@ -0,0 +1,10 @@
+declare const TAG_NAME: "mdc-listitem";
+declare const LISTITEM_VARIANTS: {
+    readonly FULL_WIDTH: "full-width";
+    readonly INSET_PILL: "inset-pill";
+    readonly INSET_RECTANGLE: "inset-rectangle";
+};
+declare const DEFAULTS: {
+    readonly VARIANT: "full-width";
+};
+export { DEFAULTS, TAG_NAME, LISTITEM_VARIANTS };

package/dist/components/listitem/listitem.constants.js

@@ -0,0 +1,11 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('listitem');
+const LISTITEM_VARIANTS = {
+    FULL_WIDTH: 'full-width',
+    INSET_PILL: 'inset-pill',
+    INSET_RECTANGLE: 'inset-rectangle',
+};
+const DEFAULTS = {
+    VARIANT: LISTITEM_VARIANTS.FULL_WIDTH,
+};
+export { DEFAULTS, TAG_NAME, LISTITEM_VARIANTS };

package/dist/components/listitem/listitem.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/listitem/listitem.styles.js

@@ -0,0 +1,70 @@
+import { css } from 'lit';
+import { hostFocusRingStyles } from '../../utils/styles';
+const styles = css `
+  :host {
+    --mdc-listitem-default-background-color: var(--mds-color-theme-background-primary-ghost);
+    --mdc-listitem-background-color-hover: var(--mds-color-theme-background-primary-hover);
+    --mdc-listitem-background-color-active: var(--mds-color-theme-background-primary-active);
+    --mdc-listitem-primary-label-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-listitem-secondary-label-color: var(--mds-color-theme-text-secondary-normal);
+    --mdc-listitem-disabled-color: var(--mds-color-theme-text-primary-disabled);
+  }
+  :host {
+    background-color: var(--mdc-listitem-default-background-color);
+    column-gap: 0.75rem;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    padding: 0.5rem 0.75rem;
+    width: 100%;
+  }
+  :host([variant="inset-rectangle"]) {
+    border-radius: 0.5rem;
+  }
+  :host([variant="inset-pill"]) {
+    border-radius: 3.125rem;
+  }
+  :host([disabled]),
+  :host([disabled])::part(leading-text-secondary-label),
+  :host([disabled])::part(leading-text-tertiary-label),
+  :host([disabled])::part(leading-text-primary-label),
+  :host([disabled])::part(trailing-text-side-header),
+  :host([disabled])::part(trailing-text-subline) {
+    color: var(--mdc-listitem-disabled-color);
+    cursor: default;
+  }
+  :host(:hover) {
+    background-color: var(--mdc-listitem-background-color-hover);
+  }
+  :host(:active) {
+    background-color: var(--mdc-listitem-background-color-active);
+  }
+  :host::part(trailing) {
+    margin-left: auto;
+  }
+  :host::part(trailing):dir(rtl) {
+    margin-left: unset;
+    margin-right: auto;
+  }
+  :host::part(leading), :host::part(trailing) {
+    align-items: center;
+    column-gap: 0.75rem;
+    display: flex;
+  }
+  :host::part(leading-text-secondary-label), :host::part(leading-text-tertiary-label) {
+    color: var(--mdc-listitem-secondary-label-color);
+  }
+  :host::part(leading-text-primary-label), :host::part(trailing-text-side-header), :host::part(trailing-text-subline) {
+    color: var(--mdc-listitem-primary-label-color);
+  }
+  :host::part(trailing-text) {
+    text-align: right;
+  }
+  ::slotted([slot="leading-controls"]), ::slotted([slot="trailing-controls"]) {
+    align-items: center;
+    column-gap: 0.75rem;
+    display: flex;
+    flex-direction: row;
+  }
+`;
+export default [styles, ...hostFocusRingStyles()];