@material/web 2.4.2-nightly.a589695.0 → 2.4.2-nightly.b4af72e.0

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sourceRoot":"","sources":["list.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAC,kBAAkB,EAAC,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAC,cAAc,EAAE,WAAW,EAAC,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAE3D,oBAAoB;AACpB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,MAAM;IACZ,aAAa,EAAE,gBAAgB;CACvB,CAAC;AAQX;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,SAAS,GAAG,KAAK,MACG,EAAE;IACtB,OAAO;QACL,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI;QACzB,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,SAAS;KACxC,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,uBAAuB,CAAC;IAC1C,UAAU,EAAE,WAAW;CACxB,CAAC,CAAC;AAEH,yBAAyB;AACzB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,QAAQ,EAAE,WAAW;IACrB,cAAc,EAAE,kBAAkB;IAClC,eAAe,EAAE,mBAAmB;IACpC,eAAe,EAAE,mBAAmB;IACpC,gBAAgB,EAAE,oBAAoB;IACtC,gBAAgB,EAAE,oBAAoB;IACtC,sBAAsB,EAAE,2BAA2B;IACnD,oBAAoB,EAAE,yBAAyB;IAC/C,cAAc,EAAE,kBAAkB;IAClC,OAAO,EAAE,cAAc,CAAC,OAAO;IAC/B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM,EAAE,cAAc,CAAC,MAAM;IAC7B,QAAQ,EAAE,cAAc,CAAC,QAAQ;CACzB,CAAC;AAkBX;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,MAAM,EAAE,UAAU,GAAG,KAAK,EAC1B,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,QAAQ,GAAG,KAAK,MACQ,EAAE;IAC1B,OAAO;QACL,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC,UAAU;QACpC,CAAC,kBAAkB,CAAC,cAAc,CAAC,EAAE,CAAC,UAAU;QAChD,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,IAAI;QAClC,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAAE,UAAU;QAC9C,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,OAAO;QACpC,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK;QAChC,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK;QAChC,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,MAAM;QAClC,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,QAAQ;KACvC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAC3B,QAAqB,EACrB,IAA6B;IAE7B,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AAC9B,CAAC;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,uBAAuB,CAAC;IAC9C,UAAU,EAAE,eAAe;IAC3B,YAAY,EAAE,aAAa;CAC5B,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {type ClassInfo} from 'lit/directives/class-map.js';\nimport {FOCUS_RING_CLASSES} from '../focus/focus-ring.js';\nimport {RIPPLE_CLASSES, setupRipple} from '../ripple/ripple.js';\nimport {createClassMapDirective} from '../shared/directives.js';\nimport {PSEUDO_CLASSES} from '../shared/pseudo-classes.js';\n\n/** List classes. */\nexport const LIST_CLASSES = {\n  list: 'list',\n  listSegmented: 'list-segmented',\n} as const;\n\n/** The state provided to the `listClasses()` function. */\nexport interface ListClassesState {\n  /** Whether to render the list with segmented items. */\n  segmented?: boolean;\n}\n\n/**\n * Returns the list classes to apply to an element based on the given state.\n *\n * @param state The state of the list.\n * @return An object of class names and truthy values if they apply.\n */\nexport function listClasses({\n  segmented = false,\n}: ListClassesState = {}): ClassInfo {\n  return {\n    [LIST_CLASSES.list]: true,\n    [LIST_CLASSES.listSegmented]: segmented,\n  };\n}\n\n/**\n * A Lit directive that adds list styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`\n *   <ul class=\"${list()}\">\n *     <li><button class=\"${listItem()}\">List item 1</button></li>\n *     <li><button class=\"${listItem()}\">List item 2</button></li>\n *     <li><button class=\"${listItem()}\">List item 3</button></li>\n *   </ul>\n * `;\n * ```\n */\nexport const list = createClassMapDirective({\n  getClasses: listClasses,\n});\n\n/** List item classes. */\nexport const LIST_ITEM_CLASSES = {\n  listItem: 'list-item',\n  listItemStatic: 'list-item-static',\n  listItemContent: 'list-item-content',\n  listItemLeading: 'list-item-leading',\n  listItemTrailing: 'list-item-trailing',\n  listItemOverline: 'list-item-overline',\n  listItemSupportingText: 'list-item-supporting-text',\n  listItemTrailingText: 'list-item-trailing-text',\n  listItemAvatar: 'list-item-avatar',\n  checked: PSEUDO_CLASSES.checked,\n  hover: PSEUDO_CLASSES.hover,\n  focus: PSEUDO_CLASSES.focus,\n  active: PSEUDO_CLASSES.active,\n  disabled: PSEUDO_CLASSES.disabled,\n} as const;\n\n/** The state provided to the `listItemClasses()` function. */\nexport interface ListItemClassesState {\n  /** Whether the list item is non-interactive. */\n  static?: boolean;\n  /** Emulates `:checked`. */\n  checked?: boolean;\n  /** Emulates `:hover`. */\n  hover?: boolean;\n  /** Emulates `:focus`. */\n  focus?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the list item classes to apply to an element based on the given\n * state.\n *\n * @param state The state of the list item.\n * @return An object of class names and truthy values if they apply.\n */\nexport function listItemClasses({\n  static: staticItem = false,\n  checked = false,\n  hover = false,\n  focus = false,\n  active = false,\n  disabled = false,\n}: ListItemClassesState = {}): ClassInfo {\n  return {\n    [RIPPLE_CLASSES.ripple]: !staticItem,\n    [FOCUS_RING_CLASSES.focusRingInner]: !staticItem,\n    [LIST_ITEM_CLASSES.listItem]: true,\n    [LIST_ITEM_CLASSES.listItemStatic]: staticItem,\n    [LIST_ITEM_CLASSES.checked]: checked,\n    [LIST_ITEM_CLASSES.hover]: hover,\n    [LIST_ITEM_CLASSES.focus]: focus,\n    [LIST_ITEM_CLASSES.active]: active,\n    [LIST_ITEM_CLASSES.disabled]: disabled,\n  };\n}\n\n/**\n * Sets up list item functionality for the given element.\n *\n * @param listItem The element on which to set up list item functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupListItem(\n  listItem: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  setupRipple(listItem, opts);\n}\n\n/**\n * A Lit directive that adds list item styling and functionality to its element.\n *\n *\n * @example\n * ```ts\n * html`\n *   <ul class=\"${list()}\">\n *     <li><button class=\"${listItem()}\">List item 1</button></li>\n *     <li><button class=\"${listItem()}\">List item 2</button></li>\n *     <li><button class=\"${listItem()}\">List item 3</button></li>\n *   </ul>\n * `;\n * ```\n */\nexport const listItem = createClassMapDirective({\n  getClasses: listItemClasses,\n  setupElement: setupListItem,\n});\n"]}

package/labs/gb/components/list/list.scss

@@ -0,0 +1,212 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use '../checkbox/checkbox-tokens';
+@use '../radio/radio-tokens';
+@use 'list-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.checkbox, md.comp.radio;
+@layer md.comp.list {
+  .list {
+    & {
+      @include list-tokens.root;
+    }
+
+    &.list-segmented {
+      @include list-tokens.segmented;
+      --list-segmented: true;
+    }
+
+    & {
+      display: flex;
+      flex-direction: column;
+      margin: unset;
+      padding: unset;
+      list-style: none;
+      gap: var(--gap);
+      border-radius: var(--container-shape);
+    }
+
+    > :first-child:not(slot),
+    ::slotted(:first-child) {
+      border-start-start-radius: inherit;
+      border-start-end-radius: inherit;
+      --first-child: true;
+    }
+
+    > :last-child:not(slot),
+    ::slotted(:last-child) {
+      border-end-start-radius: inherit;
+      border-end-end-radius: inherit;
+      --last-child: true;
+    }
+
+    slot {
+      border-radius: inherit;
+    }
+  }
+
+  .list-select {
+    &,
+    &::picker(select) {
+      // stylelint-disable-next-line scss/declaration-property-value-no-unknown --
+      // Uses customizable select
+      appearance: base-select;
+    }
+
+    border: none;
+    background: none;
+    height: fit-content;
+  }
+
+  .list-item {
+    & {
+      @include list-tokens.item;
+
+      @container style(--list-segmented: true) {
+        @include list-tokens.item-segmented;
+      }
+    }
+
+    &:where(:not(.list-item-static)) {
+      &:is(:hover, .hover) {
+        @include list-tokens.item-hovered;
+      }
+
+      &:is(:focus-within, .focus) {
+        @include list-tokens.item-focused;
+      }
+
+      &:is(:active, .active) {
+        @include list-tokens.item-pressed;
+      }
+    }
+
+    &:is(:checked, .checked) {
+      @include list-tokens.item-selected;
+    }
+
+    &:is(:disabled, .disabled) {
+      @include list-tokens.item-disabled;
+    }
+
+    & {
+      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);
+      appearance: none;
+      border: none;
+      text-align: unset;
+      text-decoration: unset;
+      width: stretch;
+    }
+
+    @container style(--first-child: true) {
+      border-start-start-radius: inherit;
+      border-start-end-radius: inherit;
+    }
+
+    @container style(--last-child: true) {
+      border-end-start-radius: inherit;
+      border-end-end-radius: inherit;
+    }
+
+    &:not(:disabled, .disabled, .list-item-static) {
+      cursor: pointer;
+    }
+
+    .list-item-content {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+
+    .list-item-leading,
+    .list-item-trailing {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      min-height: 28px;
+    }
+
+    .list-item-leading {
+      --md-icon-color: var(--leading-icon-color);
+      --md-icon-size: var(--leading-icon-size);
+    }
+
+    .list-item-trailing {
+      --md-icon-color: var(--trailing-icon-color);
+      --md-icon-size: var(--trailing-icon-size);
+    }
+
+    .list-item-overline {
+      font: var(--overline);
+      letter-spacing: var(--overline-tracking);
+      color: var(--overline-color);
+    }
+
+    .list-item-supporting-text {
+      font: var(--supporting-text);
+      letter-spacing: var(--supporting-text-tracking);
+      color: var(--supporting-text-color);
+    }
+
+    .list-item-trailing-text {
+      font: var(--trailing-supporting-text);
+      letter-spacing: var(--trailing-supporting-text-tracking);
+      color: var(--trailing-supporting-text-color);
+    }
+
+    .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);
+      color: var(--avatar-label-color);
+    }
+
+    &::checkmark {
+      font: var(--leading-icon-size) var(--md-icon-font);
+      color: var(--leading-icon-color);
+      content: 'check';
+    }
+
+    &:has(.list-item-radio, .list-item-checkbox)::checkmark {
+      display: none;
+    }
+
+    .list-item-radio,
+    .list-item-checkbox {
+      width: min-content;
+      height: min-content;
+      --ripple: none;
+      --focus-ring-outline: none;
+    }
+
+    &:is(:checked, .checked) .list-item-radio {
+      @include radio-tokens.selected;
+      --icon: 'radio_button_checked';
+    }
+
+    &:is(:checked, .checked) .list-item-checkbox {
+      @include checkbox-tokens.selected;
+    }
+  }
+}

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

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design list item component. */
+        'md-gb-list-item': ListItem;
+    }
+}
+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-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-tracking
+ * @cssprop --overline-color
+ * @cssprop --supporting-text
+ * @cssprop --supporting-text-tracking
+ * @cssprop --supporting-text-color
+ * @cssprop --trailing-supporting-text
+ * @cssprop --trailing-supporting-text-tracking
+ * @cssprop --trailing-supporting-text-color
+ */
+export declare class ListItem extends baseClass {
+    /** @nocollapse */
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    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/md-list-item.js

@@ -0,0 +1,161 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, 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-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-tracking
+ * @cssprop --overline-color
+ * @cssprop --supporting-text
+ * @cssprop --supporting-text-tracking
+ * @cssprop --supporting-text-color
+ * @cssprop --trailing-supporting-text
+ * @cssprop --trailing-supporting-text-tracking
+ * @cssprop --trailing-supporting-text-color
+ */
+let ListItem = class ListItem 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 */
+ListItem.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+ListItem.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 })
+], ListItem.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], ListItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'static' })
+], ListItem.prototype, "nonInteractive", void 0);
+ListItem = __decorate([
+    customElement('md-gb-list-item')
+], ListItem);
+export { ListItem };
+//# sourceMappingURL=md-list-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"md-list-item.js","sourceRoot":"","sources":["md-list-item.ts"],"names":[],"mappings":"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","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 {customElement, 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\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design list item component. */\n    'md-gb-list-item': ListItem;\n  }\n}\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-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-tracking\n * @cssprop --overline-color\n * @cssprop --supporting-text\n * @cssprop --supporting-text-tracking\n * @cssprop --supporting-text-color\n * @cssprop --trailing-supporting-text\n * @cssprop --trailing-supporting-text-tracking\n * @cssprop --trailing-supporting-text-color\n */\n@customElement('md-gb-list-item')\nexport class ListItem extends baseClass {\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\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/md-list.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design list component. */
+        'md-gb-list': List;
+    }
+}
+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 List extends baseClass {
+    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/md-list.js

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, 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
+ */
+let List = class List 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>`;
+    }
+};
+List.styles = [
+    listStyles,
+    css `
+      :host {
+        display: flex;
+      }
+      .list {
+        flex: 1;
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean })
+], List.prototype, "segmented", void 0);
+List = __decorate([
+    customElement('md-gb-list')
+], List);
+export { List };
+//# sourceMappingURL=md-list.js.map