@maicol07/material-web 2.5.0 → 2.5.1

package/labs/gb/components/list/list-element.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../../behaviors/element-internals.js").WithElementInternals>;
+/**
+ * A Material Design list component.
+ *
+ * @slot - Used to display list items.
+ * @csspart list - The list's root element.
+ * @cssprop --container-shape
+ * @cssprop --gap
+ */
+export declare class ListElement extends baseClass {
+    /** @nocollapse */
+    static styles: CSSResultOrNative[];
+    constructor();
+    /**
+     * Whether to render the list with segmented items.
+     */
+    segmented: boolean;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/labs/gb/components/list/list-element.js

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { internals, mixinElementInternals, } from '../../../behaviors/element-internals.js';
+import listStyles from './list.css' with { type: 'css' }; // github-only
+// import {styles as listStyles} from './list.cssresult.js'; // google3-only
+import { list } from './list.js';
+// Separate variable needed for closure.
+const baseClass = mixinElementInternals(LitElement);
+/**
+ * A Material Design list component.
+ *
+ * @slot - Used to display list items.
+ * @csspart list - The list's root element.
+ * @cssprop --container-shape
+ * @cssprop --gap
+ */
+export class ListElement extends baseClass {
+    constructor() {
+        super();
+        /**
+         * Whether to render the list with segmented items.
+         */
+        this.segmented = false;
+        this[internals].role = 'list';
+    }
+    render() {
+        return html `<div part="list" class="${list(this)}">
+      <slot></slot>
+    </div>`;
+    }
+}
+/** @nocollapse */
+ListElement.styles = [
+    listStyles,
+    css `
+      :host {
+        display: flex;
+      }
+      .list {
+        flex: 1;
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean })
+], ListElement.prototype, "segmented", void 0);
+//# sourceMappingURL=list-element.js.map

package/labs/gb/components/list/list-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-element.js","sourceRoot":"","sources":["list-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,yCAAyC,CAAC;AAEjD,OAAO,UAAU,MAAM,YAAY,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtE,4EAA4E;AAE5E,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/B,wCAAwC;AACxC,MAAM,SAAS,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;AAEpD;;;;;;;GAOG;AACH,MAAM,OAAO,WAAY,SAAQ,SAAS;IAcxC;QACE,KAAK,EAAE,CAAC;QAIV;;WAEG;QACwB,cAAS,GAAG,KAAK,CAAC;QAN3C,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,MAAM,CAAC;IAChC,CAAC;IAOkB,MAAM;QACvB,OAAO,IAAI,CAAA,2BAA2B,IAAI,CAAC,IAAI,CAAC;;WAEzC,CAAC;IACV,CAAC;;AA3BD,kBAAkB;AACF,kBAAM,GAAwB;IAC5C,UAAU;IACV,GAAG,CAAA;;;;;;;KAOF;CACF,AAVqB,CAUpB;AAUyB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;8CAAmB","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\n\nimport listStyles from './list.css' with {type: 'css'}; // github-only\n// import {styles as listStyles} from './list.cssresult.js'; // google3-only\n\nimport {list} from './list.js';\n\n// Separate variable needed for closure.\nconst baseClass = mixinElementInternals(LitElement);\n\n/**\n * A Material Design list component.\n *\n * @slot - Used to display list items.\n * @csspart list - The list's root element.\n * @cssprop --container-shape\n * @cssprop --gap\n */\nexport class ListElement extends baseClass {\n  /** @nocollapse */\n  static override styles: CSSResultOrNative[] = [\n    listStyles,\n    css`\n      :host {\n        display: flex;\n      }\n      .list {\n        flex: 1;\n      }\n    `,\n  ];\n\n  constructor() {\n    super();\n    this[internals].role = 'list';\n  }\n\n  /**\n   * Whether to render the list with segmented items.\n   */\n  @property({type: Boolean}) segmented = false;\n\n  protected override render() {\n    return html`<div part=\"list\" class=\"${list(this)}\">\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}

package/labs/gb/components/list/list-item-element.d.ts

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../../behaviors/element-internals.js").WithElementInternals>>;
+/**
+ * A Material Design list item component.
+ *
+ * @slot - Used to display the item's primary label.
+ * @slot avatar - Used to display a circular avatar before the item's content.
+ * @slot leading - Used to display icons and content before the item's main content.
+ * @slot overline - Used to display overline text above the main label.
+ * @slot supporting-text - Used to display supporting text below the main label.
+ * @slot trailing-text - Used to display metadata or text after the item's main content.
+ * @slot trailing - Used to display icons and content after the item's main content.
+ * @csspart list-item - The list item's root element.
+ * @cssprop --container-height
+ * @cssprop --container-color
+ * @cssprop --container-shape
+ * @cssprop --label-text-color
+ * @cssprop --label-text
+ * @cssprop --label-text-tracking
+ * @cssprop --leading-space
+ * @cssprop --trailing-space
+ * @cssprop --between-space
+ * @cssprop --top-space
+ * @cssprop --bottom-space
+ * @cssprop --avatar-size
+ * @cssprop --avatar-shape
+ * @cssprop --avatar-color
+ * @cssprop --avatar-label
+ * @cssprop --avatar-label-axes
+ * @cssprop --avatar-label-tracking
+ * @cssprop --avatar-label-color
+ * @cssprop --leading-icon-color
+ * @cssprop --leading-icon-size
+ * @cssprop --trailing-icon-color
+ * @cssprop --trailing-icon-size
+ * @cssprop --overline
+ * @cssprop --overline-axes
+ * @cssprop --overline-tracking
+ * @cssprop --overline-color
+ * @cssprop --supporting-text
+ * @cssprop --supporting-text-axes
+ * @cssprop --supporting-text-tracking
+ * @cssprop --supporting-text-color
+ * @cssprop --trailing-supporting-text
+ * @cssprop --trailing-supporting-text-axes
+ * @cssprop --trailing-supporting-text-tracking
+ * @cssprop --trailing-supporting-text-color
+ */
+export declare class ListItemElement extends baseClass {
+    /** @nocollapse */
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    /** @nocollapse */
+    static styles: CSSResultOrNative[];
+    constructor();
+    /**
+     * Whether the list item is selected.
+     */
+    checked: boolean;
+    /**
+     * Whether the list item is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the list item is non-interactive.
+     */
+    nonInteractive: boolean;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private renderContent;
+}
+export {};

package/labs/gb/components/list/list-item-element.js

@@ -0,0 +1,162 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
+import { internals, mixinElementInternals, } from '../../../behaviors/element-internals.js';
+import { hasSlotted } from '../shared/has-slotted.js';
+import focusRingStyles from '../focus/focus-ring.css' with { type: 'css' }; // github-only
+// import {styles as focusRingStyles} from '../focus/focus-ring.cssresult.js'; // google3-only
+import rippleStyles from '../ripple/ripple.css' with { type: 'css' }; // github-only
+// import {styles as rippleStyles} from '../ripple/ripple.cssresult.js'; // google3-only
+import listStyles from './list.css' with { type: 'css' }; // github-only
+// import {styles as listStyles} from './list.cssresult.js'; // google3-only
+import { listItem } from './list.js';
+// Separate variable needed for closure.
+const baseClass = mixinDelegatesAria(mixinElementInternals(LitElement));
+/**
+ * A Material Design list item component.
+ *
+ * @slot - Used to display the item's primary label.
+ * @slot avatar - Used to display a circular avatar before the item's content.
+ * @slot leading - Used to display icons and content before the item's main content.
+ * @slot overline - Used to display overline text above the main label.
+ * @slot supporting-text - Used to display supporting text below the main label.
+ * @slot trailing-text - Used to display metadata or text after the item's main content.
+ * @slot trailing - Used to display icons and content after the item's main content.
+ * @csspart list-item - The list item's root element.
+ * @cssprop --container-height
+ * @cssprop --container-color
+ * @cssprop --container-shape
+ * @cssprop --label-text-color
+ * @cssprop --label-text
+ * @cssprop --label-text-tracking
+ * @cssprop --leading-space
+ * @cssprop --trailing-space
+ * @cssprop --between-space
+ * @cssprop --top-space
+ * @cssprop --bottom-space
+ * @cssprop --avatar-size
+ * @cssprop --avatar-shape
+ * @cssprop --avatar-color
+ * @cssprop --avatar-label
+ * @cssprop --avatar-label-axes
+ * @cssprop --avatar-label-tracking
+ * @cssprop --avatar-label-color
+ * @cssprop --leading-icon-color
+ * @cssprop --leading-icon-size
+ * @cssprop --trailing-icon-color
+ * @cssprop --trailing-icon-size
+ * @cssprop --overline
+ * @cssprop --overline-axes
+ * @cssprop --overline-tracking
+ * @cssprop --overline-color
+ * @cssprop --supporting-text
+ * @cssprop --supporting-text-axes
+ * @cssprop --supporting-text-tracking
+ * @cssprop --supporting-text-color
+ * @cssprop --trailing-supporting-text
+ * @cssprop --trailing-supporting-text-axes
+ * @cssprop --trailing-supporting-text-tracking
+ * @cssprop --trailing-supporting-text-color
+ */
+export class ListItemElement extends baseClass {
+    constructor() {
+        super();
+        /**
+         * Whether the list item is selected.
+         */
+        this.checked = false;
+        /**
+         * Whether the list item is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Whether the list item is non-interactive.
+         */
+        this.nonInteractive = false;
+        this[internals].role = 'listitem';
+    }
+    render() {
+        const state = {
+            checked: this.checked,
+            disabled: this.disabled,
+            static: this.nonInteractive,
+        };
+        if (this.nonInteractive) {
+            return html `<div part="list-item" class="${listItem(state)}"
+        >${this.renderContent()}</div
+      >`;
+        }
+        // Needed for closure conformance
+        const { ariaLabel } = this;
+        return html `<button
+      part="list-item"
+      class="${listItem(state)}"
+      ?disabled=${this.disabled}
+      aria-label=${ariaLabel || nothing}>
+      ${this.renderContent()}
+    </button>`;
+    }
+    renderContent() {
+        return html `
+      <span class="list-item-leading">
+        <slot name="avatar" class="list-item-avatar" ${hasSlotted()}></slot>
+        <slot name="leading" ${hasSlotted()}></slot>
+      </span>
+      <span class="list-item-content">
+        <slot name="overline" class="list-item-overline"></slot>
+        <slot></slot>
+        <slot name="supporting-text" class="list-item-supporting-text"></slot>
+      </span>
+      <span class="list-item-trailing">
+        <slot
+          name="trailing-text"
+          class="list-item-trailing-text"
+          ${hasSlotted()}></slot>
+        <slot name="trailing" ${hasSlotted()}></slot>
+      </span>
+    `;
+    }
+}
+/** @nocollapse */
+ListItemElement.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+/** @nocollapse */
+ListItemElement.styles = [
+    focusRingStyles,
+    rippleStyles,
+    listStyles,
+    css `
+      :host {
+        display: flex;
+        align-items: center;
+      }
+      .list-item {
+        flex: 1;
+        align-items: inherit;
+      }
+      :is(.list-item-leading, .list-item-trailing):not(:has(.has-slotted)) {
+        display: none;
+      }
+      slot:not(.has-slotted) {
+        display: contents;
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean })
+], ListItemElement.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], ListItemElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'static' })
+], ListItemElement.prototype, "nonInteractive", void 0);
+//# sourceMappingURL=list-item-element.js.map

package/labs/gb/components/list/list-item-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item-element.js","sourceRoot":"","sources":["list-item-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AACzE,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,yCAAyC,CAAC;AACjD,OAAO,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAEpD,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,8FAA8F;AAC9F,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,wFAAwF;AACxF,OAAO,UAAU,MAAM,YAAY,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtE,4EAA4E;AAE5E,OAAO,EAAC,QAAQ,EAAC,MAAM,WAAW,CAAC;AAEnC,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,OAAO,eAAgB,SAAQ,SAAS;IA8B5C;QACE,KAAK,EAAE,CAAC;QAIV;;WAEG;QACwB,YAAO,GAAG,KAAK,CAAC;QAE3C;;WAEG;QACwB,aAAQ,GAAG,KAAK,CAAC;QAE5C;;WAEG;QAEH,mBAAc,GAAG,KAAK,CAAC;QAjBrB,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,UAAU,CAAC;IACpC,CAAC;IAkBkB,MAAM;QACvB,MAAM,KAAK,GAAG;YACZ,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,cAAc;SAC5B,CAAC;QACF,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,OAAO,IAAI,CAAA,gCAAgC,QAAQ,CAAC,KAAK,CAAC;WACrD,IAAI,CAAC,aAAa,EAAE;QACvB,CAAC;QACL,CAAC;QAED,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;eAEA,QAAQ,CAAC,KAAK,CAAC;kBACZ,IAAI,CAAC,QAAQ;mBACZ,SAAS,IAAI,OAAO;QAC/B,IAAI,CAAC,aAAa,EAAE;cACd,CAAC;IACb,CAAC;IAEO,aAAa;QACnB,OAAO,IAAI,CAAA;;uDAEwC,UAAU,EAAE;+BACpC,UAAU,EAAE;;;;;;;;;;;YAW/B,UAAU,EAAE;gCACQ,UAAU,EAAE;;KAEvC,CAAC;IACJ,CAAC;;AA5FD,kBAAkB;AACF,iCAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEF,kBAAkB;AACF,sBAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,UAAU;IACV,GAAG,CAAA;;;;;;;;;;;;;;;KAeF;CACF,AApBqB,CAoBpB;AAUyB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;gDAAiB;AAKhB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;iDAAkB;AAM5C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAC,CAAC;uDACvC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\nimport {hasSlotted} from '../shared/has-slotted.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import {styles as focusRingStyles} from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import {styles as rippleStyles} from '../ripple/ripple.cssresult.js'; // google3-only\nimport listStyles from './list.css' with {type: 'css'}; // github-only\n// import {styles as listStyles} from './list.cssresult.js'; // google3-only\n\nimport {listItem} from './list.js';\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(mixinElementInternals(LitElement));\n\n/**\n * A Material Design list item component.\n *\n * @slot - Used to display the item's primary label.\n * @slot avatar - Used to display a circular avatar before the item's content.\n * @slot leading - Used to display icons and content before the item's main content.\n * @slot overline - Used to display overline text above the main label.\n * @slot supporting-text - Used to display supporting text below the main label.\n * @slot trailing-text - Used to display metadata or text after the item's main content.\n * @slot trailing - Used to display icons and content after the item's main content.\n * @csspart list-item - The list item's root element.\n * @cssprop --container-height\n * @cssprop --container-color\n * @cssprop --container-shape\n * @cssprop --label-text-color\n * @cssprop --label-text\n * @cssprop --label-text-tracking\n * @cssprop --leading-space\n * @cssprop --trailing-space\n * @cssprop --between-space\n * @cssprop --top-space\n * @cssprop --bottom-space\n * @cssprop --avatar-size\n * @cssprop --avatar-shape\n * @cssprop --avatar-color\n * @cssprop --avatar-label\n * @cssprop --avatar-label-axes\n * @cssprop --avatar-label-tracking\n * @cssprop --avatar-label-color\n * @cssprop --leading-icon-color\n * @cssprop --leading-icon-size\n * @cssprop --trailing-icon-color\n * @cssprop --trailing-icon-size\n * @cssprop --overline\n * @cssprop --overline-axes\n * @cssprop --overline-tracking\n * @cssprop --overline-color\n * @cssprop --supporting-text\n * @cssprop --supporting-text-axes\n * @cssprop --supporting-text-tracking\n * @cssprop --supporting-text-color\n * @cssprop --trailing-supporting-text\n * @cssprop --trailing-supporting-text-axes\n * @cssprop --trailing-supporting-text-tracking\n * @cssprop --trailing-supporting-text-color\n */\nexport class ListItemElement extends baseClass {\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /** @nocollapse */\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    listStyles,\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n      }\n      .list-item {\n        flex: 1;\n        align-items: inherit;\n      }\n      :is(.list-item-leading, .list-item-trailing):not(:has(.has-slotted)) {\n        display: none;\n      }\n      slot:not(.has-slotted) {\n        display: contents;\n      }\n    `,\n  ];\n\n  constructor() {\n    super();\n    this[internals].role = 'listitem';\n  }\n\n  /**\n   * Whether the list item is selected.\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * Whether the list item is disabled.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * Whether the list item is non-interactive.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'static'})\n  nonInteractive = false;\n\n  protected override render() {\n    const state = {\n      checked: this.checked,\n      disabled: this.disabled,\n      static: this.nonInteractive,\n    };\n    if (this.nonInteractive) {\n      return html`<div part=\"list-item\" class=\"${listItem(state)}\"\n        >${this.renderContent()}</div\n      >`;\n    }\n\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`<button\n      part=\"list-item\"\n      class=\"${listItem(state)}\"\n      ?disabled=${this.disabled}\n      aria-label=${ariaLabel || nothing}>\n      ${this.renderContent()}\n    </button>`;\n  }\n\n  private renderContent() {\n    return html`\n      <span class=\"list-item-leading\">\n        <slot name=\"avatar\" class=\"list-item-avatar\" ${hasSlotted()}></slot>\n        <slot name=\"leading\" ${hasSlotted()}></slot>\n      </span>\n      <span class=\"list-item-content\">\n        <slot name=\"overline\" class=\"list-item-overline\"></slot>\n        <slot></slot>\n        <slot name=\"supporting-text\" class=\"list-item-supporting-text\"></slot>\n      </span>\n      <span class=\"list-item-trailing\">\n        <slot\n          name=\"trailing-text\"\n          class=\"list-item-trailing-text\"\n          ${hasSlotted()}></slot>\n        <slot name=\"trailing\" ${hasSlotted()}></slot>\n      </span>\n    `;\n  }\n}\n"]}

package/labs/gb/components/list/list.css

@@ -0,0 +1,4 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.checkbox, md.comp.radio;@layer md.comp.list{.list{--container-shape: var(--md-sys-shape-corner-lg);--gap: 0}.list.list-segmented{--gap: 2px;--list-segmented: true}.list{display:flex;flex-direction:column;margin:unset;padding:unset;list-style:none;gap:var(--gap);border-radius:var(--container-shape)}.list>:first-child:not(slot),.list ::slotted(:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;--first-child: true}.list>:last-child:not(slot),.list ::slotted(:last-child){border-end-start-radius:inherit;border-end-end-radius:inherit;--last-child: true}.list slot{border-radius:inherit}.list-select,.list-select::picker(select){appearance:base-select}.list-select{border:none;background:none;height:fit-content}.list-item{--container-height: 56px;--container-color: transparent;--container-shape: var(--md-sys-shape-corner-xs);--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-body-lg);--label-text-axes: var(--md-sys-typescale-body-lg-axes);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--leading-space: 16px;--trailing-space: 16px;--between-space: 12px;--top-space: 10px;--bottom-space: 10px;--avatar-size: 40px;--avatar-shape: var(--md-sys-shape-corner-full);--avatar-color: var(--md-sys-color-primary-container);--avatar-label: var(--md-sys-typescale-title-md);--avatar-label-axes: var(--md-sys-typescale-title-md-axes);--avatar-label-tracking: var(--md-sys-typescale-title-md-tracking);--avatar-label-color: var(--md-sys-color-on-primary-container);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--overline: var(--md-sys-typescale-label-sm);--overline-axes: var(--md-sys-typescale-label-sm-axes);--overline-tracking: var(--md-sys-typescale-label-sm-tracking);--overline-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-md);--supporting-text-axes: var(--md-sys-typescale-body-md-axes);--supporting-text-tracking: var(--md-sys-typescale-body-md-tracking);--supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text: var(--md-sys-typescale-label-sm);--trailing-supporting-text-axes: var(--md-sys-typescale-label-sm-axes);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-sm-tracking );--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant)}@container style(--list-segmented: true){.list-item{--container-color: var(--md-sys-color-surface)}}.list-item:where(:not(.list-item-static)):is(:hover,.hover){--container-shape: var(--md-sys-shape-corner-md);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:focus-within,.focus){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:active,.active){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:is(:checked,.checked){--container-shape: var(--md-sys-shape-corner-lg);--container-color: var(--md-sys-color-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container);--leading-icon-color: var(--md-sys-color-on-secondary-container);--trailing-icon-color: var(--md-sys-color-on-secondary-container);--overline-color: var(--md-sys-color-on-secondary-container);--supporting-text-color: var(--md-sys-color-on-secondary-container);--trailing-supporting-text-color: var(--md-sys-color-on-secondary-container)}.list-item:is(:disabled,.disabled){--container-shape: var(--md-sys-shape-corner-xs);--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--overline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--supporting-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% )}.list-item{display:flex;align-items:center;gap:var(--between-space);box-sizing:border-box;min-height:var(--container-height);border-radius:var(--container-shape);background-color:var(--container-color);padding-inline:var(--leading-space) var(--trailing-space);padding-block:var(--top-space) var(--bottom-space);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes);appearance:none;border:none;text-align:unset;text-decoration:unset;width:stretch}@container style(--first-child: true){.list-item{border-start-start-radius:inherit;border-start-end-radius:inherit}}@container style(--last-child: true){.list-item{border-end-start-radius:inherit;border-end-end-radius:inherit}}.list-item:not(:disabled,.disabled,.list-item-static){cursor:pointer}.list-item .list-item-content{display:flex;flex-direction:column;flex:1}.list-item .list-item-leading,.list-item .list-item-trailing{display:flex;align-items:center;gap:8px;min-height:28px}.list-item .list-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.list-item .list-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}.list-item .list-item-overline{font:var(--overline);letter-spacing:var(--overline-tracking);font-variation-settings:var(--overline-axes);color:var(--overline-color)}.list-item .list-item-supporting-text{font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);font-variation-settings:var(--supporting-text-axes);color:var(--supporting-text-color)}.list-item .list-item-trailing-text{font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);font-variation-settings:var(--trailing-supporting-text-axes);color:var(--trailing-supporting-text-color)}.list-item .list-item-avatar{display:grid;place-items:center;background-color:var(--avatar-color);border-radius:var(--avatar-shape);aspect-ratio:1;width:var(--avatar-size);font:var(--avatar-label);letter-spacing:var(--avatar-label-tracking);font-variation-settings:var(--avatar-label-axes);color:var(--avatar-label-color)}.list-item::checkmark{font:var(--leading-icon-size) var(--md-icon-font);color:var(--leading-icon-color);content:"check"}.list-item:has(.list-item-radio,.list-item-checkbox)::checkmark{display:none}.list-item .list-item-radio,.list-item .list-item-checkbox{width:min-content;height:min-content;--ripple: none;--focus-ring-outline: none}.list-item:is(:checked,.checked) .list-item-radio{--icon-color: var(--md-sys-color-primary);--state-layer-color: var(--md-sys-color-primary);--icon: "radio_button_checked"}.list-item:is(:checked,.checked) .list-item-checkbox{--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}}/*# sourceMappingURL=list.css.map */

package/labs/gb/components/list/list.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["list.scss","_list-tokens.scss","../radio/_radio-tokens.scss","../checkbox/_checkbox-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GAWA,mFACA,oBAEI,MCPF,iDACA,SDUE,qBCLF,WDOI,uBAGF,MACE,aACA,sBACA,aACA,cACA,gBACA,eACA,qCAGF,2DAEE,kCACA,gCACA,oBAGF,yDAEE,gCACA,8BACA,mBAGF,WACE,sBAKF,0CAIE,uBALJ,aAQE,YACA,gBACA,mBAIA,WChDF,yBACA,+BACA,iDACA,mDACA,8CACA,wDACA,gEACA,sBACA,uBACA,sBACA,kBACA,qBACA,oBACA,gDACA,sDACA,iDACA,2DACA,mEACA,+DACA,6DACA,0BACA,8DACA,2BACA,6CACA,uDACA,+DACA,yDACA,mDACA,6DACA,qEACA,gEACA,6DACA,uEACA,iFAGA,yEDeI,yCAHF,WCPF,gDDgBI,4DCZJ,iDACA,qDACA,sDDcI,mECVJ,iDACA,qDACA,sDDYI,8DCRJ,iDACA,qDACA,sDDWE,iCCPF,iDACA,2DACA,+DACA,iEACA,kEACA,6DACA,oEACA,6EDIE,oFCCF,wEACA,yEACA,2EACA,4EACA,uEACA,8EACA,yFDHE,WACE,aACA,mBACA,yBACA,sBACA,mCACA,qCACA,wCACA,0DACA,mDACA,8BACA,uBACA,0CACA,+CACA,gBACA,YACA,iBACA,sBACA,cAGF,sCApDF,WAqDI,kCACA,iCAGF,qCAzDF,WA0DI,gCACA,+BAGF,sDACE,eAGF,8BACE,aACA,sBACA,OAGF,6DAEE,aACA,mBACA,QACA,gBAGF,8BACE,2CACA,yCAGF,+BACE,4CACA,0CAGF,+BACE,qBACA,wCACA,6CACA,4BAGF,sCACE,4BACA,+CACA,oDACA,mCAGF,oCACE,qCACA,wDACA,6DACA,4CAGF,6BACE,aACA,mBACA,qCACA,kCACA,eACA,yBACA,yBACA,4CACA,iDACA,gCAGF,sBACE,kDACA,gCACA,gBAGF,gEACE,aAGF,2DAEE,kBACA,mBACA,eACA,2BAGF,kDEnLF,0CACA,iDFoLI,+BAGF,qDGjLF,mBACA,+CACA","file":"list.css"}

package/labs/gb/components/list/list.cssresult.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: import("lit").CSSResult;
+declare const _default: CSSStyleSheet;
+export default _default;

package/labs/gb/components/list/list.cssresult.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/components/list/list.css.
+import { css } from 'lit';
+export const styles = css `/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.checkbox, md.comp.radio;@layer md.comp.list{.list{--container-shape: var(--md-sys-shape-corner-lg);--gap: 0}.list.list-segmented{--gap: 2px;--list-segmented: true}.list{display:flex;flex-direction:column;margin:unset;padding:unset;list-style:none;gap:var(--gap);border-radius:var(--container-shape)}.list>:first-child:not(slot),.list ::slotted(:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;--first-child: true}.list>:last-child:not(slot),.list ::slotted(:last-child){border-end-start-radius:inherit;border-end-end-radius:inherit;--last-child: true}.list slot{border-radius:inherit}.list-select,.list-select::picker(select){appearance:base-select}.list-select{border:none;background:none;height:fit-content}.list-item{--container-height: 56px;--container-color: transparent;--container-shape: var(--md-sys-shape-corner-xs);--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-body-lg);--label-text-axes: var(--md-sys-typescale-body-lg-axes);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--leading-space: 16px;--trailing-space: 16px;--between-space: 12px;--top-space: 10px;--bottom-space: 10px;--avatar-size: 40px;--avatar-shape: var(--md-sys-shape-corner-full);--avatar-color: var(--md-sys-color-primary-container);--avatar-label: var(--md-sys-typescale-title-md);--avatar-label-axes: var(--md-sys-typescale-title-md-axes);--avatar-label-tracking: var(--md-sys-typescale-title-md-tracking);--avatar-label-color: var(--md-sys-color-on-primary-container);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--overline: var(--md-sys-typescale-label-sm);--overline-axes: var(--md-sys-typescale-label-sm-axes);--overline-tracking: var(--md-sys-typescale-label-sm-tracking);--overline-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-md);--supporting-text-axes: var(--md-sys-typescale-body-md-axes);--supporting-text-tracking: var(--md-sys-typescale-body-md-tracking);--supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text: var(--md-sys-typescale-label-sm);--trailing-supporting-text-axes: var(--md-sys-typescale-label-sm-axes);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-sm-tracking );--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant)}@container style(--list-segmented: true){.list-item{--container-color: var(--md-sys-color-surface)}}.list-item:where(:not(.list-item-static)):is(:hover,.hover){--container-shape: var(--md-sys-shape-corner-md);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:focus-within,.focus){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:active,.active){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:is(:checked,.checked){--container-shape: var(--md-sys-shape-corner-lg);--container-color: var(--md-sys-color-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container);--leading-icon-color: var(--md-sys-color-on-secondary-container);--trailing-icon-color: var(--md-sys-color-on-secondary-container);--overline-color: var(--md-sys-color-on-secondary-container);--supporting-text-color: var(--md-sys-color-on-secondary-container);--trailing-supporting-text-color: var(--md-sys-color-on-secondary-container)}.list-item:is(:disabled,.disabled){--container-shape: var(--md-sys-shape-corner-xs);--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--overline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--supporting-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% )}.list-item{display:flex;align-items:center;gap:var(--between-space);box-sizing:border-box;min-height:var(--container-height);border-radius:var(--container-shape);background-color:var(--container-color);padding-inline:var(--leading-space) var(--trailing-space);padding-block:var(--top-space) var(--bottom-space);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes);appearance:none;border:none;text-align:unset;text-decoration:unset;width:stretch}@container style(--first-child: true){.list-item{border-start-start-radius:inherit;border-start-end-radius:inherit}}@container style(--last-child: true){.list-item{border-end-start-radius:inherit;border-end-end-radius:inherit}}.list-item:not(:disabled,.disabled,.list-item-static){cursor:pointer}.list-item .list-item-content{display:flex;flex-direction:column;flex:1}.list-item .list-item-leading,.list-item .list-item-trailing{display:flex;align-items:center;gap:8px;min-height:28px}.list-item .list-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.list-item .list-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}.list-item .list-item-overline{font:var(--overline);letter-spacing:var(--overline-tracking);font-variation-settings:var(--overline-axes);color:var(--overline-color)}.list-item .list-item-supporting-text{font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);font-variation-settings:var(--supporting-text-axes);color:var(--supporting-text-color)}.list-item .list-item-trailing-text{font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);font-variation-settings:var(--trailing-supporting-text-axes);color:var(--trailing-supporting-text-color)}.list-item .list-item-avatar{display:grid;place-items:center;background-color:var(--avatar-color);border-radius:var(--avatar-shape);aspect-ratio:1;width:var(--avatar-size);font:var(--avatar-label);letter-spacing:var(--avatar-label-tracking);font-variation-settings:var(--avatar-label-axes);color:var(--avatar-label-color)}.list-item::checkmark{font:var(--leading-icon-size) var(--md-icon-font);color:var(--leading-icon-color);content:"check"}.list-item:has(.list-item-radio,.list-item-checkbox)::checkmark{display:none}.list-item .list-item-radio,.list-item .list-item-checkbox{width:min-content;height:min-content;--ripple: none;--focus-ring-outline: none}.list-item:is(:checked,.checked) .list-item-radio{--icon-color: var(--md-sys-color-primary);--state-layer-color: var(--md-sys-color-primary);--icon: "radio_button_checked"}.list-item:is(:checked,.checked) .list-item-checkbox{--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=list.cssresult.js.map

package/labs/gb/components/list/list.cssresult.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.cssresult.js","sourceRoot":"","sources":["list.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,+DAA+D;AAC/D,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AACF,eAAe,MAAM,CAAC,UAAW,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/gb/components/list/list.css.\nimport {css} from 'lit';\nexport const styles = css`/*!\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.checkbox, md.comp.radio;@layer md.comp.list{.list{--container-shape: var(--md-sys-shape-corner-lg);--gap: 0}.list.list-segmented{--gap: 2px;--list-segmented: true}.list{display:flex;flex-direction:column;margin:unset;padding:unset;list-style:none;gap:var(--gap);border-radius:var(--container-shape)}.list>:first-child:not(slot),.list ::slotted(:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;--first-child: true}.list>:last-child:not(slot),.list ::slotted(:last-child){border-end-start-radius:inherit;border-end-end-radius:inherit;--last-child: true}.list slot{border-radius:inherit}.list-select,.list-select::picker(select){appearance:base-select}.list-select{border:none;background:none;height:fit-content}.list-item{--container-height: 56px;--container-color: transparent;--container-shape: var(--md-sys-shape-corner-xs);--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-body-lg);--label-text-axes: var(--md-sys-typescale-body-lg-axes);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--leading-space: 16px;--trailing-space: 16px;--between-space: 12px;--top-space: 10px;--bottom-space: 10px;--avatar-size: 40px;--avatar-shape: var(--md-sys-shape-corner-full);--avatar-color: var(--md-sys-color-primary-container);--avatar-label: var(--md-sys-typescale-title-md);--avatar-label-axes: var(--md-sys-typescale-title-md-axes);--avatar-label-tracking: var(--md-sys-typescale-title-md-tracking);--avatar-label-color: var(--md-sys-color-on-primary-container);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--overline: var(--md-sys-typescale-label-sm);--overline-axes: var(--md-sys-typescale-label-sm-axes);--overline-tracking: var(--md-sys-typescale-label-sm-tracking);--overline-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-md);--supporting-text-axes: var(--md-sys-typescale-body-md-axes);--supporting-text-tracking: var(--md-sys-typescale-body-md-tracking);--supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text: var(--md-sys-typescale-label-sm);--trailing-supporting-text-axes: var(--md-sys-typescale-label-sm-axes);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-sm-tracking );--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant)}@container style(--list-segmented: true){.list-item{--container-color: var(--md-sys-color-surface)}}.list-item:where(:not(.list-item-static)):is(:hover,.hover){--container-shape: var(--md-sys-shape-corner-md);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:focus-within,.focus){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:active,.active){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:is(:checked,.checked){--container-shape: var(--md-sys-shape-corner-lg);--container-color: var(--md-sys-color-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container);--leading-icon-color: var(--md-sys-color-on-secondary-container);--trailing-icon-color: var(--md-sys-color-on-secondary-container);--overline-color: var(--md-sys-color-on-secondary-container);--supporting-text-color: var(--md-sys-color-on-secondary-container);--trailing-supporting-text-color: var(--md-sys-color-on-secondary-container)}.list-item:is(:disabled,.disabled){--container-shape: var(--md-sys-shape-corner-xs);--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--overline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--supporting-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% )}.list-item{display:flex;align-items:center;gap:var(--between-space);box-sizing:border-box;min-height:var(--container-height);border-radius:var(--container-shape);background-color:var(--container-color);padding-inline:var(--leading-space) var(--trailing-space);padding-block:var(--top-space) var(--bottom-space);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes);appearance:none;border:none;text-align:unset;text-decoration:unset;width:stretch}@container style(--first-child: true){.list-item{border-start-start-radius:inherit;border-start-end-radius:inherit}}@container style(--last-child: true){.list-item{border-end-start-radius:inherit;border-end-end-radius:inherit}}.list-item:not(:disabled,.disabled,.list-item-static){cursor:pointer}.list-item .list-item-content{display:flex;flex-direction:column;flex:1}.list-item .list-item-leading,.list-item .list-item-trailing{display:flex;align-items:center;gap:8px;min-height:28px}.list-item .list-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.list-item .list-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}.list-item .list-item-overline{font:var(--overline);letter-spacing:var(--overline-tracking);font-variation-settings:var(--overline-axes);color:var(--overline-color)}.list-item .list-item-supporting-text{font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);font-variation-settings:var(--supporting-text-axes);color:var(--supporting-text-color)}.list-item .list-item-trailing-text{font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);font-variation-settings:var(--trailing-supporting-text-axes);color:var(--trailing-supporting-text-color)}.list-item .list-item-avatar{display:grid;place-items:center;background-color:var(--avatar-color);border-radius:var(--avatar-shape);aspect-ratio:1;width:var(--avatar-size);font:var(--avatar-label);letter-spacing:var(--avatar-label-tracking);font-variation-settings:var(--avatar-label-axes);color:var(--avatar-label-color)}.list-item::checkmark{font:var(--leading-icon-size) var(--md-icon-font);color:var(--leading-icon-color);content:\"check\"}.list-item:has(.list-item-radio,.list-item-checkbox)::checkmark{display:none}.list-item .list-item-radio,.list-item .list-item-checkbox{width:min-content;height:min-content;--ripple: none;--focus-ring-outline: none}.list-item:is(:checked,.checked) .list-item-radio{--icon-color: var(--md-sys-color-primary);--state-layer-color: var(--md-sys-color-primary);--icon: \"radio_button_checked\"}.list-item:is(:checked,.checked) .list-item-checkbox{--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}}\n`;\nexport default styles.styleSheet!;\n"]}

package/labs/gb/components/list/list.d.ts

@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/** List classes. */
+export declare const LIST_CLASSES: {
+    readonly list: "list";
+    readonly listSegmented: "list-segmented";
+};
+/** The state provided to the `listClasses()` function. */
+export interface ListClassesState {
+    /** Whether to render the list with segmented items. */
+    segmented?: boolean;
+}
+/**
+ * Returns the list classes to apply to an element based on the given state.
+ *
+ * @param state The state of the list.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function listClasses({ segmented, }?: ListClassesState): ClassInfo;
+/**
+ * A Lit directive that adds list styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <ul class="${list()}">
+ *     <li><button class="${listItem()}">List item 1</button></li>
+ *     <li><button class="${listItem()}">List item 2</button></li>
+ *     <li><button class="${listItem()}">List item 3</button></li>
+ *   </ul>
+ * `;
+ * ```
+ */
+export declare const list: (state?: ListClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;
+/** List item classes. */
+export declare const LIST_ITEM_CLASSES: {
+    readonly listItem: "list-item";
+    readonly listItemStatic: "list-item-static";
+    readonly listItemContent: "list-item-content";
+    readonly listItemLeading: "list-item-leading";
+    readonly listItemTrailing: "list-item-trailing";
+    readonly listItemOverline: "list-item-overline";
+    readonly listItemSupportingText: "list-item-supporting-text";
+    readonly listItemTrailingText: "list-item-trailing-text";
+    readonly listItemAvatar: "list-item-avatar";
+    readonly checked: string;
+    readonly hover: string;
+    readonly focus: string;
+    readonly active: string;
+    readonly disabled: string;
+};
+/** The state provided to the `listItemClasses()` function. */
+export interface ListItemClassesState {
+    /** Whether the list item is non-interactive. */
+    static?: boolean;
+    /** Emulates `:checked`. */
+    checked?: boolean;
+    /** Emulates `:hover`. */
+    hover?: boolean;
+    /** Emulates `:focus`. */
+    focus?: boolean;
+    /** Emulates `:active`. */
+    active?: boolean;
+    /** Emulates `:disabled`. */
+    disabled?: boolean;
+}
+/**
+ * Returns the list item classes to apply to an element based on the given
+ * state.
+ *
+ * @param state The state of the list item.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function listItemClasses({ static: staticItem, checked, hover, focus, active, disabled, }?: ListItemClassesState): ClassInfo;
+/**
+ * Sets up list item functionality for the given element.
+ *
+ * @param listItem The element on which to set up list item functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export declare function setupListItem(listItem: HTMLElement, opts?: {
+    signal?: AbortSignal;
+}): void;
+/**
+ * A Lit directive that adds list item styling and functionality to its element.
+ *
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <ul class="${list()}">
+ *     <li><button class="${listItem()}">List item 1</button></li>
+ *     <li><button class="${listItem()}">List item 2</button></li>
+ *     <li><button class="${listItem()}">List item 3</button></li>
+ *   </ul>
+ * `;
+ * ```
+ */
+export declare const listItem: (state?: ListItemClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;

package/labs/gb/components/list/list.js

@@ -0,0 +1,109 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { FOCUS_RING_CLASSES } from '../focus/focus-ring.js';
+import { RIPPLE_CLASSES, setupRipple } from '../ripple/ripple.js';
+import { createClassMapDirective } from '../shared/directives.js';
+import { PSEUDO_CLASSES } from '../shared/pseudo-classes.js';
+/** List classes. */
+export const LIST_CLASSES = {
+    list: 'list',
+    listSegmented: 'list-segmented',
+};
+/**
+ * Returns the list classes to apply to an element based on the given state.
+ *
+ * @param state The state of the list.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function listClasses({ segmented = false, } = {}) {
+    return {
+        [LIST_CLASSES.list]: true,
+        [LIST_CLASSES.listSegmented]: segmented,
+    };
+}
+/**
+ * A Lit directive that adds list styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <ul class="${list()}">
+ *     <li><button class="${listItem()}">List item 1</button></li>
+ *     <li><button class="${listItem()}">List item 2</button></li>
+ *     <li><button class="${listItem()}">List item 3</button></li>
+ *   </ul>
+ * `;
+ * ```
+ */
+export const list = createClassMapDirective({
+    getClasses: listClasses,
+});
+/** List item classes. */
+export const LIST_ITEM_CLASSES = {
+    listItem: 'list-item',
+    listItemStatic: 'list-item-static',
+    listItemContent: 'list-item-content',
+    listItemLeading: 'list-item-leading',
+    listItemTrailing: 'list-item-trailing',
+    listItemOverline: 'list-item-overline',
+    listItemSupportingText: 'list-item-supporting-text',
+    listItemTrailingText: 'list-item-trailing-text',
+    listItemAvatar: 'list-item-avatar',
+    checked: PSEUDO_CLASSES.checked,
+    hover: PSEUDO_CLASSES.hover,
+    focus: PSEUDO_CLASSES.focus,
+    active: PSEUDO_CLASSES.active,
+    disabled: PSEUDO_CLASSES.disabled,
+};
+/**
+ * Returns the list item classes to apply to an element based on the given
+ * state.
+ *
+ * @param state The state of the list item.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function listItemClasses({ static: staticItem = false, checked = false, hover = false, focus = false, active = false, disabled = false, } = {}) {
+    return {
+        [RIPPLE_CLASSES.ripple]: !staticItem,
+        [FOCUS_RING_CLASSES.focusRingInner]: !staticItem,
+        [LIST_ITEM_CLASSES.listItem]: true,
+        [LIST_ITEM_CLASSES.listItemStatic]: staticItem,
+        [LIST_ITEM_CLASSES.checked]: checked,
+        [LIST_ITEM_CLASSES.hover]: hover,
+        [LIST_ITEM_CLASSES.focus]: focus,
+        [LIST_ITEM_CLASSES.active]: active,
+        [LIST_ITEM_CLASSES.disabled]: disabled,
+    };
+}
+/**
+ * Sets up list item functionality for the given element.
+ *
+ * @param listItem The element on which to set up list item functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export function setupListItem(listItem, opts) {
+    setupRipple(listItem, opts);
+}
+/**
+ * A Lit directive that adds list item styling and functionality to its element.
+ *
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <ul class="${list()}">
+ *     <li><button class="${listItem()}">List item 1</button></li>
+ *     <li><button class="${listItem()}">List item 2</button></li>
+ *     <li><button class="${listItem()}">List item 3</button></li>
+ *   </ul>
+ * `;
+ * ```
+ */
+export const listItem = createClassMapDirective({
+    getClasses: listItemClasses,
+    setupElement: setupListItem,
+});
+//# sourceMappingURL=list.js.map