@material/web 2.4.2-nightly.f6c1871.0 → 2.4.2-nightly.fd6fe2a.0

package/labs/gb/components/fab/md-fab.js

@@ -6,10 +6,10 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.css' with { type: 'css' }; // github-only
-// import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js'; // google3-only
-import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.css' with { type: 'css' }; // github-only
-// import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.cssresult.js'; // google3-only
+import focusRingStyles from '../focus/focus-ring.css' with { type: 'css' }; // github-only
+// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only
+import rippleStyles from '../ripple/ripple.css' with { type: 'css' }; // github-only
+// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only
 import fabStyles from './fab.css' with { type: 'css' }; // github-only
 // import {styles as fabStyles} from './fab.cssresult.js'; // google3-only
 import { fab } from './fab.js';

package/labs/gb/components/fab/md-fab.js.map

@@ -1 +1 @@
-{"version":3,"file":"md-fab.js","sourceRoot":"","sources":["md-fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,eAAe,MAAM,uDAAuD,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtH,gHAAgH;AAChH,OAAO,YAAY,MAAM,oDAAoD,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAChH,0GAA0G;AAC1G,OAAO,SAAS,MAAM,WAAW,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACpE,0EAA0E;AAE1E,OAAO,EAAC,GAAG,EAA8B,MAAM,UAAU,CAAC;AAS1D;;GAEG;AAEI,IAAM,GAAG,GAAT,MAAM,GAAI,SAAQ,UAAU;IAA5B;;QAeO,UAAK,GAAa,mBAAmB,CAAC;QACtC,SAAI,GAAY,SAAS,CAAC;IASxC,CAAC;IAPoB,MAAM;QACvB,OAAO,IAAI,CAAA;;eAEA,GAAG,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC;;cAE1C,CAAC;IACb,CAAC;;AAvBe,UAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,SAAS;IACT,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAEU;IAAX,QAAQ,EAAE;kCAAuC;AACtC;IAAX,QAAQ,EAAE;iCAA2B;AAhB3B,GAAG;IADf,aAAa,CAAC,QAAQ,CAAC;GACX,GAAG,CAyBf","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 {customElement, property} from 'lit/decorators.js';\n\nimport focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '@material/web/labs/gb/components/ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.cssresult.js'; // google3-only\nimport fabStyles from './fab.css' with {type: 'css'}; // github-only\n// import {styles as fabStyles} from './fab.cssresult.js'; // google3-only\n\nimport {fab, type FabColor, type FabSize} from './fab.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design fab component. */\n    'md-fab': Fab;\n  }\n}\n\n/**\n * A Material Design fab component.\n */\n@customElement('md-fab')\nexport class Fab extends LitElement {\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    fabStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .fab {\n        flex: 1;\n      }\n    `,\n  ];\n\n  @property() color: FabColor = 'primary-container';\n  @property() size: FabSize = 'default';\n\n  protected override render() {\n    return html`<button\n      part=\"fab\"\n      class=\"${fab({color: this.color, size: this.size})}\">\n      <slot></slot>\n    </button>`;\n  }\n}\n"]}
+{"version":3,"file":"md-fab.js","sourceRoot":"","sources":["md-fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,kFAAkF;AAClF,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,4EAA4E;AAC5E,OAAO,SAAS,MAAM,WAAW,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACpE,0EAA0E;AAE1E,OAAO,EAAC,GAAG,EAA8B,MAAM,UAAU,CAAC;AAS1D;;GAEG;AAEI,IAAM,GAAG,GAAT,MAAM,GAAI,SAAQ,UAAU;IAA5B;;QAeO,UAAK,GAAa,mBAAmB,CAAC;QACtC,SAAI,GAAY,SAAS,CAAC;IASxC,CAAC;IAPoB,MAAM;QACvB,OAAO,IAAI,CAAA;;eAEA,GAAG,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC;;cAE1C,CAAC;IACb,CAAC;;AAvBe,UAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,SAAS;IACT,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAEU;IAAX,QAAQ,EAAE;kCAAuC;AACtC;IAAX,QAAQ,EAAE;iCAA2B;AAhB3B,GAAG;IADf,aAAa,CAAC,QAAQ,CAAC;GACX,GAAG,CAyBf","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 {customElement, property} from 'lit/decorators.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only\nimport fabStyles from './fab.css' with {type: 'css'}; // github-only\n// import {styles as fabStyles} from './fab.cssresult.js'; // google3-only\n\nimport {fab, type FabColor, type FabSize} from './fab.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design fab component. */\n    'md-fab': Fab;\n  }\n}\n\n/**\n * A Material Design fab component.\n */\n@customElement('md-fab')\nexport class Fab extends LitElement {\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    fabStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .fab {\n        flex: 1;\n      }\n    `,\n  ];\n\n  @property() color: FabColor = 'primary-container';\n  @property() size: FabSize = 'default';\n\n  protected override render() {\n    return html`<button\n      part=\"fab\"\n      class=\"${fab({color: this.color, size: this.size})}\">\n      <slot></slot>\n    </button>`;\n  }\n}\n"]}

package/labs/gb/components/focus/focus-ring.js

@@ -3,7 +3,7 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { PSEUDO_CLASSES } from '@material/web/labs/gb/components/shared/pseudo-classes.js';
+import { PSEUDO_CLASSES } from '../shared/pseudo-classes.js';
 /** Focus ring type configurations. */
 export const FOCUS_RING_TYPES = {
     outer: 'outer',

package/labs/gb/components/focus/focus-ring.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus-ring.js","sourceRoot":"","sources":["focus-ring.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,cAAc,EAAC,MAAM,2DAA2D,CAAC;AAMzF,sCAAsC;AACtC,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CACN,CAAC;AAEX,0BAA0B;AAC1B,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,cAAc,EAAE,kBAAkB;IAClC,cAAc,EAAE,kBAAkB;IAClC,eAAe,EAAE,mBAAmB;IACpC,aAAa,EAAE,iBAAiB;IAChC,YAAY,EAAE,cAAc,CAAC,YAAY;CAC1C,CAAC;AAUF;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,IAAI,GAAG,gBAAgB,CAAC,KAAK,EAC7B,YAAY,GAAG,KAAK,MACK,EAAE;IAC3B,OAAO;QACL,CAAC,kBAAkB,CAAC,cAAc,CAAC,EACjC,IAAI,KAAK,gBAAgB,CAAC,KAAK,IAAI,CAAC,IAAI;QAC1C,CAAC,kBAAkB,CAAC,cAAc,CAAC,EAAE,IAAI,KAAK,gBAAgB,CAAC,KAAK;QACpE,CAAC,kBAAkB,CAAC,YAAY,CAAC,EAAE,YAAY;KAChD,CAAC;AACJ,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {PSEUDO_CLASSES} from '@material/web/labs/gb/components/shared/pseudo-classes.js';\nimport {type ClassInfo} from 'lit/directives/class-map.js';\n\n/** Focus ring type configuration types. */\nexport type FocusRingType = 'outer' | 'inner';\n\n/** Focus ring type configurations. */\nexport const FOCUS_RING_TYPES = {\n  outer: 'outer',\n  inner: 'inner',\n} as const;\n\n/** Focus ring classes. */\nexport const FOCUS_RING_CLASSES = {\n  focusRingOuter: 'focus-ring-outer',\n  focusRingInner: 'focus-ring-inner',\n  focusRingTarget: 'focus-ring-target',\n  focusRingHost: 'focus-ring-host',\n  focusVisible: PSEUDO_CLASSES.focusVisible,\n};\n\n/** The state provided to the `focusRingClasses()` function. */\nexport interface FocusRingClassesState {\n  /** The type of focus ring. Defaults to outer. */\n  type?: FocusRingType;\n  /** Emulates `:focus-visible`. */\n  focusVisible?: boolean;\n}\n\n/**\n * Returns the focus ring classes to apply to an element based on the given\n * state.\n *\n * @param state The state of the focus ring.\n * @return An object of class names and truthy values if they apply.\n */\nexport function focusRingClasses({\n  type = FOCUS_RING_TYPES.outer,\n  focusVisible = false,\n}: FocusRingClassesState = {}): ClassInfo {\n  return {\n    [FOCUS_RING_CLASSES.focusRingOuter]:\n      type === FOCUS_RING_TYPES.outer || !type,\n    [FOCUS_RING_CLASSES.focusRingInner]: type === FOCUS_RING_TYPES.inner,\n    [FOCUS_RING_CLASSES.focusVisible]: focusVisible,\n  };\n}\n"]}
+{"version":3,"file":"focus-ring.js","sourceRoot":"","sources":["focus-ring.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAK3D,sCAAsC;AACtC,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CACN,CAAC;AAEX,0BAA0B;AAC1B,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,cAAc,EAAE,kBAAkB;IAClC,cAAc,EAAE,kBAAkB;IAClC,eAAe,EAAE,mBAAmB;IACpC,aAAa,EAAE,iBAAiB;IAChC,YAAY,EAAE,cAAc,CAAC,YAAY;CAC1C,CAAC;AAUF;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,IAAI,GAAG,gBAAgB,CAAC,KAAK,EAC7B,YAAY,GAAG,KAAK,MACK,EAAE;IAC3B,OAAO;QACL,CAAC,kBAAkB,CAAC,cAAc,CAAC,EACjC,IAAI,KAAK,gBAAgB,CAAC,KAAK,IAAI,CAAC,IAAI;QAC1C,CAAC,kBAAkB,CAAC,cAAc,CAAC,EAAE,IAAI,KAAK,gBAAgB,CAAC,KAAK;QACpE,CAAC,kBAAkB,CAAC,YAAY,CAAC,EAAE,YAAY;KAChD,CAAC;AACJ,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 {PSEUDO_CLASSES} from '../shared/pseudo-classes.js';\n\n/** Focus ring type configuration types. */\nexport type FocusRingType = 'outer' | 'inner';\n\n/** Focus ring type configurations. */\nexport const FOCUS_RING_TYPES = {\n  outer: 'outer',\n  inner: 'inner',\n} as const;\n\n/** Focus ring classes. */\nexport const FOCUS_RING_CLASSES = {\n  focusRingOuter: 'focus-ring-outer',\n  focusRingInner: 'focus-ring-inner',\n  focusRingTarget: 'focus-ring-target',\n  focusRingHost: 'focus-ring-host',\n  focusVisible: PSEUDO_CLASSES.focusVisible,\n};\n\n/** The state provided to the `focusRingClasses()` function. */\nexport interface FocusRingClassesState {\n  /** The type of focus ring. Defaults to outer. */\n  type?: FocusRingType;\n  /** Emulates `:focus-visible`. */\n  focusVisible?: boolean;\n}\n\n/**\n * Returns the focus ring classes to apply to an element based on the given\n * state.\n *\n * @param state The state of the focus ring.\n * @return An object of class names and truthy values if they apply.\n */\nexport function focusRingClasses({\n  type = FOCUS_RING_TYPES.outer,\n  focusVisible = false,\n}: FocusRingClassesState = {}): ClassInfo {\n  return {\n    [FOCUS_RING_CLASSES.focusRingOuter]:\n      type === FOCUS_RING_TYPES.outer || !type,\n    [FOCUS_RING_CLASSES.focusRingInner]: type === FOCUS_RING_TYPES.inner,\n    [FOCUS_RING_CLASSES.focusVisible]: focusVisible,\n  };\n}\n"]}

package/labs/gb/components/iconbutton/icon-button.d.ts

@@ -94,4 +94,4 @@ export declare function setupIconButton(iconButton: HTMLElement, opts?: {
  * </button>`;
  * ```
  */
-export declare const iconButton: (state?: IconButtonClassesState & import("@material/web/labs/gb/components/shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;
+export declare const iconButton: (state?: IconButtonClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;

package/labs/gb/components/iconbutton/icon-button.js

@@ -3,11 +3,11 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { afterDispatch, setupDispatchHooks, } from '@material/web/internal/events/dispatch-hooks.js';
-import { focusRingClasses } from '@material/web/labs/gb/components/focus/focus-ring.js';
-import { rippleClasses, setupRipple, } from '@material/web/labs/gb/components/ripple/ripple.js';
-import { createClassMapDirective } from '@material/web/labs/gb/components/shared/directives.js';
-import { PSEUDO_CLASSES, isDisabled, } from '@material/web/labs/gb/components/shared/pseudo-classes.js';
+import { afterDispatch, setupDispatchHooks, } from '../../../../internal/events/dispatch-hooks.js';
+import { focusRingClasses } from '../focus/focus-ring.js';
+import { rippleClasses, setupRipple } from '../ripple/ripple.js';
+import { createClassMapDirective } from '../shared/directives.js';
+import { PSEUDO_CLASSES, isDisabled } from '../shared/pseudo-classes.js';
 /** Icon Button color configurations. */
 export const ICON_BUTTON_COLORS = {
     filled: 'filled',

package/labs/gb/components/iconbutton/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["icon-button.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 {\n  afterDispatch,\n  setupDispatchHooks,\n} from '@material/web/internal/events/dispatch-hooks.js';\nimport {focusRingClasses} from '@material/web/labs/gb/components/focus/focus-ring.js';\nimport {\n  rippleClasses,\n  setupRipple,\n} from '@material/web/labs/gb/components/ripple/ripple.js';\nimport {createClassMapDirective} from '@material/web/labs/gb/components/shared/directives.js';\nimport {\n  PSEUDO_CLASSES,\n  isDisabled,\n} from '@material/web/labs/gb/components/shared/pseudo-classes.js';\nimport {type ClassInfo} from 'lit/directives/class-map.js';\n\n/** Icon Button color configuration types. */\nexport type IconButtonColor = 'filled' | 'tonal' | 'outlined' | 'standard';\n\n/** Icon Button color configurations. */\nexport const ICON_BUTTON_COLORS = {\n  filled: 'filled',\n  tonal: 'tonal',\n  outlined: 'outlined',\n  standard: 'standard',\n} as const;\n\n/** Icon Button size configuration types. */\nexport type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Icon Button size configurations. */\nexport const ICON_BUTTON_SIZES = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n  xl: 'xl',\n} as const;\n\n/** Icon Button width configuration types. */\nexport type IconButtonWidth = 'narrow' | 'wide' | '';\n\n/** Icon Button width configurations. */\nexport const ICON_BUTTON_WIDTHS = {\n  narrow: 'narrow',\n  wide: 'wide',\n} as const;\n\n/** Icon Button classes. */\nexport const ICON_BUTTON_CLASSES = {\n  iconBtn: 'icon-btn',\n  iconBtnFilled: 'icon-btn-filled',\n  iconBtnTonal: 'icon-btn-tonal',\n  iconBtnOutlined: 'icon-btn-outlined',\n  iconBtnStandard: 'icon-btn-standard',\n  iconBtnXs: 'icon-btn-xs',\n  iconBtnSm: 'icon-btn-sm',\n  iconBtnMd: 'icon-btn-md',\n  iconBtnLg: 'icon-btn-lg',\n  iconBtnXl: 'icon-btn-xl',\n  iconBtnSquare: 'icon-btn-square',\n  iconBtnNarrow: 'icon-btn-narrow',\n  iconBtnWide: 'icon-btn-wide',\n  iconBtnUnselected: 'icon-btn-unselected',\n  iconBtnSelected: 'icon-btn-selected',\n  active: PSEUDO_CLASSES.active,\n  disabled: PSEUDO_CLASSES.disabled,\n};\n\n/** The state provided to the `iconButtonClasses()` function. */\nexport interface IconButtonClassesState {\n  /** The color of the icon button. */\n  color?: IconButtonColor;\n  /** The size of the icon button. */\n  size?: IconButtonSize;\n  /** The width of the icon button. */\n  width?: IconButtonWidth;\n  /** Whether the icon button is a square shape. */\n  square?: boolean;\n  /** Whether the toggle button is selected, if not undefined. */\n  selected?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the icon button classes to apply to an element based on the given\n * state.\n *\n * @param state The state of the icon button.\n * @return An object of class names and truthy values if they apply.\n */\nexport function iconButtonClasses({\n  color,\n  size,\n  width,\n  square = false,\n  selected,\n  active = false,\n  disabled = false,\n}: IconButtonClassesState = {}): ClassInfo {\n  return {\n    ...rippleClasses(),\n    ...focusRingClasses(),\n    [ICON_BUTTON_CLASSES.iconBtn]: true,\n    [ICON_BUTTON_CLASSES.iconBtnFilled]: color === ICON_BUTTON_COLORS.filled,\n    [ICON_BUTTON_CLASSES.iconBtnTonal]: color === ICON_BUTTON_COLORS.tonal,\n    [ICON_BUTTON_CLASSES.iconBtnOutlined]:\n      color === ICON_BUTTON_COLORS.outlined,\n    [ICON_BUTTON_CLASSES.iconBtnStandard]:\n      color === ICON_BUTTON_COLORS.standard || !color,\n    [ICON_BUTTON_CLASSES.iconBtnXs]: size === ICON_BUTTON_SIZES.xs,\n    [ICON_BUTTON_CLASSES.iconBtnSm]: size === ICON_BUTTON_SIZES.sm || !size,\n    [ICON_BUTTON_CLASSES.iconBtnMd]: size === ICON_BUTTON_SIZES.md,\n    [ICON_BUTTON_CLASSES.iconBtnLg]: size === ICON_BUTTON_SIZES.lg,\n    [ICON_BUTTON_CLASSES.iconBtnXl]: size === ICON_BUTTON_SIZES.xl,\n    [ICON_BUTTON_CLASSES.iconBtnNarrow]: width === ICON_BUTTON_WIDTHS.narrow,\n    [ICON_BUTTON_CLASSES.iconBtnWide]: width === ICON_BUTTON_WIDTHS.wide,\n    [ICON_BUTTON_CLASSES.iconBtnSquare]: square,\n    [ICON_BUTTON_CLASSES.iconBtnUnselected]: selected === false,\n    [ICON_BUTTON_CLASSES.iconBtnSelected]: selected === true,\n    [ICON_BUTTON_CLASSES.active]: active,\n    [ICON_BUTTON_CLASSES.disabled]: disabled,\n  };\n}\n\n/**\n * Sets up icon button functionality for the given element.\n *\n * @param iconButton The element on which to set up icon button functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupIconButton(\n  iconButton: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  setupDispatchHooks(iconButton, 'click');\n  setupRipple(iconButton, opts);\n  iconButton.addEventListener(\n    'click',\n    (event) => {\n      if (isDisabled(iconButton)) {\n        event.stopImmediatePropagation();\n        event.preventDefault();\n        return;\n      }\n\n      afterDispatch(event, () => {\n        const isToggle = iconButton.hasAttribute('aria-pressed');\n        if (event.defaultPrevented || !isToggle) {\n          return;\n        }\n\n        const isPressed = iconButton.ariaPressed === 'true';\n        iconButton.ariaPressed = String(!isPressed);\n        iconButton.dispatchEvent(\n          new InputEvent('input', {bubbles: true, composed: true}),\n        );\n        iconButton.dispatchEvent(new Event('change', {bubbles: true}));\n      });\n    },\n    opts,\n  );\n}\n\n/**\n * A Lit directive that adds icon button styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`<button class=\"${iconButton({color: 'filled'})}\">\n *   <md-icon>favorite</md-icon>\n * </button>`;\n * ```\n */\nexport const iconButton = createClassMapDirective({\n  getClasses: iconButtonClasses,\n  setupElement: setupIconButton,\n});\n"]}
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["icon-button.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 {type ClassInfo} from 'lit/directives/class-map.js';\nimport {\n  afterDispatch,\n  setupDispatchHooks,\n} from '../../../../internal/events/dispatch-hooks.js';\nimport {focusRingClasses} from '../focus/focus-ring.js';\nimport {rippleClasses, setupRipple} from '../ripple/ripple.js';\nimport {createClassMapDirective} from '../shared/directives.js';\nimport {PSEUDO_CLASSES, isDisabled} from '../shared/pseudo-classes.js';\n\n/** Icon Button color configuration types. */\nexport type IconButtonColor = 'filled' | 'tonal' | 'outlined' | 'standard';\n\n/** Icon Button color configurations. */\nexport const ICON_BUTTON_COLORS = {\n  filled: 'filled',\n  tonal: 'tonal',\n  outlined: 'outlined',\n  standard: 'standard',\n} as const;\n\n/** Icon Button size configuration types. */\nexport type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Icon Button size configurations. */\nexport const ICON_BUTTON_SIZES = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n  xl: 'xl',\n} as const;\n\n/** Icon Button width configuration types. */\nexport type IconButtonWidth = 'narrow' | 'wide' | '';\n\n/** Icon Button width configurations. */\nexport const ICON_BUTTON_WIDTHS = {\n  narrow: 'narrow',\n  wide: 'wide',\n} as const;\n\n/** Icon Button classes. */\nexport const ICON_BUTTON_CLASSES = {\n  iconBtn: 'icon-btn',\n  iconBtnFilled: 'icon-btn-filled',\n  iconBtnTonal: 'icon-btn-tonal',\n  iconBtnOutlined: 'icon-btn-outlined',\n  iconBtnStandard: 'icon-btn-standard',\n  iconBtnXs: 'icon-btn-xs',\n  iconBtnSm: 'icon-btn-sm',\n  iconBtnMd: 'icon-btn-md',\n  iconBtnLg: 'icon-btn-lg',\n  iconBtnXl: 'icon-btn-xl',\n  iconBtnSquare: 'icon-btn-square',\n  iconBtnNarrow: 'icon-btn-narrow',\n  iconBtnWide: 'icon-btn-wide',\n  iconBtnUnselected: 'icon-btn-unselected',\n  iconBtnSelected: 'icon-btn-selected',\n  active: PSEUDO_CLASSES.active,\n  disabled: PSEUDO_CLASSES.disabled,\n};\n\n/** The state provided to the `iconButtonClasses()` function. */\nexport interface IconButtonClassesState {\n  /** The color of the icon button. */\n  color?: IconButtonColor;\n  /** The size of the icon button. */\n  size?: IconButtonSize;\n  /** The width of the icon button. */\n  width?: IconButtonWidth;\n  /** Whether the icon button is a square shape. */\n  square?: boolean;\n  /** Whether the toggle button is selected, if not undefined. */\n  selected?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the icon button classes to apply to an element based on the given\n * state.\n *\n * @param state The state of the icon button.\n * @return An object of class names and truthy values if they apply.\n */\nexport function iconButtonClasses({\n  color,\n  size,\n  width,\n  square = false,\n  selected,\n  active = false,\n  disabled = false,\n}: IconButtonClassesState = {}): ClassInfo {\n  return {\n    ...rippleClasses(),\n    ...focusRingClasses(),\n    [ICON_BUTTON_CLASSES.iconBtn]: true,\n    [ICON_BUTTON_CLASSES.iconBtnFilled]: color === ICON_BUTTON_COLORS.filled,\n    [ICON_BUTTON_CLASSES.iconBtnTonal]: color === ICON_BUTTON_COLORS.tonal,\n    [ICON_BUTTON_CLASSES.iconBtnOutlined]:\n      color === ICON_BUTTON_COLORS.outlined,\n    [ICON_BUTTON_CLASSES.iconBtnStandard]:\n      color === ICON_BUTTON_COLORS.standard || !color,\n    [ICON_BUTTON_CLASSES.iconBtnXs]: size === ICON_BUTTON_SIZES.xs,\n    [ICON_BUTTON_CLASSES.iconBtnSm]: size === ICON_BUTTON_SIZES.sm || !size,\n    [ICON_BUTTON_CLASSES.iconBtnMd]: size === ICON_BUTTON_SIZES.md,\n    [ICON_BUTTON_CLASSES.iconBtnLg]: size === ICON_BUTTON_SIZES.lg,\n    [ICON_BUTTON_CLASSES.iconBtnXl]: size === ICON_BUTTON_SIZES.xl,\n    [ICON_BUTTON_CLASSES.iconBtnNarrow]: width === ICON_BUTTON_WIDTHS.narrow,\n    [ICON_BUTTON_CLASSES.iconBtnWide]: width === ICON_BUTTON_WIDTHS.wide,\n    [ICON_BUTTON_CLASSES.iconBtnSquare]: square,\n    [ICON_BUTTON_CLASSES.iconBtnUnselected]: selected === false,\n    [ICON_BUTTON_CLASSES.iconBtnSelected]: selected === true,\n    [ICON_BUTTON_CLASSES.active]: active,\n    [ICON_BUTTON_CLASSES.disabled]: disabled,\n  };\n}\n\n/**\n * Sets up icon button functionality for the given element.\n *\n * @param iconButton The element on which to set up icon button functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupIconButton(\n  iconButton: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  setupDispatchHooks(iconButton, 'click');\n  setupRipple(iconButton, opts);\n  iconButton.addEventListener(\n    'click',\n    (event) => {\n      if (isDisabled(iconButton)) {\n        event.stopImmediatePropagation();\n        event.preventDefault();\n        return;\n      }\n\n      afterDispatch(event, () => {\n        const isToggle = iconButton.hasAttribute('aria-pressed');\n        if (event.defaultPrevented || !isToggle) {\n          return;\n        }\n\n        const isPressed = iconButton.ariaPressed === 'true';\n        iconButton.ariaPressed = String(!isPressed);\n        iconButton.dispatchEvent(\n          new InputEvent('input', {bubbles: true, composed: true}),\n        );\n        iconButton.dispatchEvent(new Event('change', {bubbles: true}));\n      });\n    },\n    opts,\n  );\n}\n\n/**\n * A Lit directive that adds icon button styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`<button class=\"${iconButton({color: 'filled'})}\">\n *   <md-icon>favorite</md-icon>\n * </button>`;\n * ```\n */\nexport const iconButton = createClassMapDirective({\n  getClasses: iconButtonClasses,\n  setupElement: setupIconButton,\n});\n"]}

package/labs/gb/components/iconbutton/md-icon-button.d.ts

@@ -11,7 +11,7 @@ declare global {
         'md-icon-button': IconButton;
     }
 }
-declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("@material/web/labs/behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("@material/web/labs/behaviors/form-associated.js").FormAssociatedConstructor, import("@material/web/labs/behaviors/form-associated.js").FormAssociated>, import("@material/web/labs/behaviors/form-submitter.js").FormSubmitter>>;
+declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../../behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../../behaviors/form-associated.js").FormAssociatedConstructor, import("../../../behaviors/form-associated.js").FormAssociated>, import("../../../behaviors/form-submitter.js").FormSubmitter>>;
 /**
  * A Material Design icon button component.
  */

package/labs/gb/components/iconbutton/md-icon-button.js

@@ -4,15 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { mixinDelegatesAria } from '@material/web/internal/aria/delegate.js';
-import { redispatchEvent } from '@material/web/internal/events/redispatch-event.js';
-import { mixinElementInternals } from '@material/web/labs/behaviors/element-internals.js';
-import { mixinFormAssociated } from '@material/web/labs/behaviors/form-associated.js';
-import { mixinFormSubmitter } from '@material/web/labs/behaviors/form-submitter.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js';
-import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.cssresult.js';
+import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
+import { redispatchEvent } from '../../../../internal/events/redispatch-event.js';
+import { mixinElementInternals } from '../../../behaviors/element-internals.js';
+import { mixinFormAssociated } from '../../../behaviors/form-associated.js';
+import { mixinFormSubmitter } from '../../../behaviors/form-submitter.js';
+import focusRingStyles from '../focus/focus-ring.cssresult.js';
+import rippleStyles from '../ripple/ripple.cssresult.js';
 import iconButtonStyles from './icon-button.cssresult.js';
 import { iconButton } from './icon-button.js';
 const baseClass = mixinDelegatesAria(mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))));

package/labs/gb/components/iconbutton/md-icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"md-icon-button.js","sourceRoot":"","sources":["md-icon-button.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 {ARIAMixinStrict} from '@material/web/internal/aria/aria.js';\nimport {mixinDelegatesAria} from '@material/web/internal/aria/delegate.js';\nimport {redispatchEvent} from '@material/web/internal/events/redispatch-event.js';\nimport {mixinElementInternals} from '@material/web/labs/behaviors/element-internals.js';\nimport {mixinFormAssociated} from '@material/web/labs/behaviors/form-associated.js';\nimport {mixinFormSubmitter} from '@material/web/labs/behaviors/form-submitter.js';\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\n\nimport focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js';\nimport rippleStyles from '@material/web/labs/gb/components/ripple/ripple.cssresult.js';\nimport iconButtonStyles from './icon-button.cssresult.js';\n\nimport type {\n  IconButtonColor,\n  IconButtonSize,\n  IconButtonWidth,\n} from './icon-button.js';\nimport {iconButton} from './icon-button.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design icon button component. */\n    'md-icon-button': IconButton;\n  }\n}\n\nconst baseClass = mixinDelegatesAria(\n  mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A Material Design icon button component.\n */\n@customElement('md-icon-button')\nexport class IconButton extends baseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    iconButtonStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .icon-btn {\n        flex: 1;\n      }\n    `,\n  ];\n\n  /**\n   * The color of the button.\n   */\n  @property() color: IconButtonColor = 'standard';\n\n  /**\n   * The size of the button.\n   */\n  @property() size: IconButtonSize = 'sm';\n\n  /**\n   * Changes the shape of the button to be square.\n   */\n  @property({type: Boolean}) square = false;\n\n  /**\n   * Changes the width of the button.\n   */\n  @property() width: IconButtonWidth = '';\n\n  /**\n   * A string indicating the behavior of the button.\n   *\n   * - \"submit\" (default): A button that submits its associated form.\n   * - \"reset\": A button that resets its associated form.\n   * - \"button\": A normal button.\n   * - \"toggle\": A toggle button using the `selected` property.\n   * - \"link\": An anchor link (`<a>`). Type is always \"link\" when `href` is set.\n   */\n  @property({noAccessor: true})\n  override get type(): string {\n    return this.href ? 'link' : super.type;\n  }\n  override set type(type: string) {\n    if (this.href && type !== 'link') {\n      return;\n    }\n    super.type = type;\n  }\n\n  /**\n   * Whether or not the button is \"soft-disabled\" (disabled but still\n   * focusable).\n   */\n  @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n  softDisabled = false;\n\n  /**\n   * Whether or not the button is selected, when `type=\"toggle\"`.\n   */\n  @property({type: Boolean}) selected = false;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href = '';\n\n  /**\n   * The filename to use when downloading the linked resource.\n   */\n  @property() download = '';\n\n  /**\n   * Where to display the linked `href` URL for a link button.\n   */\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  protected override render() {\n    const classes = iconButton({\n      color: this.color,\n      size: this.size,\n      width: this.width,\n      square: this.square,\n      disabled: this.softDisabled,\n    });\n\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    if (this.type === 'link') {\n      return html`<a\n        part=\"icon-btn\"\n        class=${classes}\n        href=${this.href}\n        download=${this.download || nothing}\n        target=${this.target || nothing}\n        aria-label=${ariaLabel || nothing}\n        aria-haspopup=${ariaHasPopup || nothing}\n        aria-expanded=${ariaExpanded || nothing}\n        aria-disabled=${this.disabled || this.softDisabled || nothing}\n        tabindex=${this.disabled && !this.softDisabled ? -1 : nothing}>\n        <slot></slot>\n      </a>`;\n    }\n\n    return html`<button\n      part=\"icon-btn\"\n      class=${classes}\n      type=\"button\"\n      ?disabled=${this.disabled}\n      aria-disabled=${this.softDisabled || nothing}\n      aria-label=${ariaLabel || nothing}\n      aria-pressed=${this.type === 'toggle' ? this.selected : nothing}\n      aria-haspopup=${ariaHasPopup || nothing}\n      aria-expanded=${ariaExpanded || nothing}\n      @change=${this.handleChange}>\n      <slot></slot>\n    </button>`;\n  }\n\n  private handleChange(event: Event) {\n    this.selected = (event.target as HTMLElement).ariaPressed === 'true';\n    redispatchEvent(this, event);\n  }\n}\n"]}
+{"version":3,"file":"md-icon-button.js","sourceRoot":"","sources":["md-icon-button.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 {redispatchEvent} from '../../../../internal/events/redispatch-event.js';\nimport {mixinElementInternals} from '../../../behaviors/element-internals.js';\nimport {mixinFormAssociated} from '../../../behaviors/form-associated.js';\nimport {mixinFormSubmitter} from '../../../behaviors/form-submitter.js';\n\nimport focusRingStyles from '../focus/focus-ring.cssresult.js';\nimport rippleStyles from '../ripple/ripple.cssresult.js';\nimport iconButtonStyles from './icon-button.cssresult.js';\n\nimport type {\n  IconButtonColor,\n  IconButtonSize,\n  IconButtonWidth,\n} from './icon-button.js';\nimport {iconButton} from './icon-button.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design icon button component. */\n    'md-icon-button': IconButton;\n  }\n}\n\nconst baseClass = mixinDelegatesAria(\n  mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A Material Design icon button component.\n */\n@customElement('md-icon-button')\nexport class IconButton extends baseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    iconButtonStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .icon-btn {\n        flex: 1;\n      }\n    `,\n  ];\n\n  /**\n   * The color of the button.\n   */\n  @property() color: IconButtonColor = 'standard';\n\n  /**\n   * The size of the button.\n   */\n  @property() size: IconButtonSize = 'sm';\n\n  /**\n   * Changes the shape of the button to be square.\n   */\n  @property({type: Boolean}) square = false;\n\n  /**\n   * Changes the width of the button.\n   */\n  @property() width: IconButtonWidth = '';\n\n  /**\n   * A string indicating the behavior of the button.\n   *\n   * - \"submit\" (default): A button that submits its associated form.\n   * - \"reset\": A button that resets its associated form.\n   * - \"button\": A normal button.\n   * - \"toggle\": A toggle button using the `selected` property.\n   * - \"link\": An anchor link (`<a>`). Type is always \"link\" when `href` is set.\n   */\n  @property({noAccessor: true})\n  override get type(): string {\n    return this.href ? 'link' : super.type;\n  }\n  override set type(type: string) {\n    if (this.href && type !== 'link') {\n      return;\n    }\n    super.type = type;\n  }\n\n  /**\n   * Whether or not the button is \"soft-disabled\" (disabled but still\n   * focusable).\n   */\n  @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n  softDisabled = false;\n\n  /**\n   * Whether or not the button is selected, when `type=\"toggle\"`.\n   */\n  @property({type: Boolean}) selected = false;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href = '';\n\n  /**\n   * The filename to use when downloading the linked resource.\n   */\n  @property() download = '';\n\n  /**\n   * Where to display the linked `href` URL for a link button.\n   */\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  protected override render() {\n    const classes = iconButton({\n      color: this.color,\n      size: this.size,\n      width: this.width,\n      square: this.square,\n      disabled: this.softDisabled,\n    });\n\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    if (this.type === 'link') {\n      return html`<a\n        part=\"icon-btn\"\n        class=${classes}\n        href=${this.href}\n        download=${this.download || nothing}\n        target=${this.target || nothing}\n        aria-label=${ariaLabel || nothing}\n        aria-haspopup=${ariaHasPopup || nothing}\n        aria-expanded=${ariaExpanded || nothing}\n        aria-disabled=${this.disabled || this.softDisabled || nothing}\n        tabindex=${this.disabled && !this.softDisabled ? -1 : nothing}>\n        <slot></slot>\n      </a>`;\n    }\n\n    return html`<button\n      part=\"icon-btn\"\n      class=${classes}\n      type=\"button\"\n      ?disabled=${this.disabled}\n      aria-disabled=${this.softDisabled || nothing}\n      aria-label=${ariaLabel || nothing}\n      aria-pressed=${this.type === 'toggle' ? this.selected : nothing}\n      aria-haspopup=${ariaHasPopup || nothing}\n      aria-expanded=${ariaExpanded || nothing}\n      @change=${this.handleChange}>\n      <slot></slot>\n    </button>`;\n  }\n\n  private handleChange(event: Event) {\n    this.selected = (event.target as HTMLElement).ariaPressed === 'true';\n    redispatchEvent(this, event);\n  }\n}\n"]}

package/labs/gb/components/list/_list-tokens.scss

@@ -0,0 +1,102 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  --container-shape: var(--md-sys-shape-corner-lg);
+  --gap: 0;
+}
+
+@mixin segmented {
+  --gap: 2px;
+}
+
+@mixin 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-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-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-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-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-tracking: var(
+    --md-sys-typescale-label-sm-tracking
+  );
+  --trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);
+}
+
+@mixin item-segmented {
+  --container-color: var(--md-sys-color-surface);
+}
+
+@mixin item-hovered {
+  --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);
+}
+
+@mixin item-focused {
+  --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);
+}
+
+@mixin item-pressed {
+  --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);
+}
+
+@mixin item-selected {
+  --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
+  );
+}
+
+@mixin item-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%
+  );
+}

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-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-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-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-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-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);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);color:var(--overline-color)}.list-item .list-item-supporting-text{font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);color:var(--supporting-text-color)}.list-item .list-item-trailing-text{font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);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);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,MCRF,iDACA,SDWE,qBCPF,WDSI,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,WCnDF,yBACA,+BACA,iDACA,mDACA,8CACA,gEACA,sBACA,uBACA,sBACA,kBACA,qBACA,oBACA,gDACA,sDACA,iDACA,mEACA,+DACA,6DACA,0BACA,8DACA,2BACA,6CACA,+DACA,yDACA,mDACA,qEACA,gEACA,6DACA,iFAGA,yEDuBI,yCAHF,WChBF,gDDyBI,4DCrBJ,iDACA,qDACA,sDDuBI,mECnBJ,iDACA,qDACA,sDDqBI,8DCjBJ,iDACA,qDACA,sDDoBE,iCChBF,iDACA,2DACA,+DACA,iEACA,kEACA,6DACA,oEACA,+EDaE,mCCPF,iDACA,wEACA,yEACA,6EAGA,8EAGA,uEACA,gFAGA,yFDFE,WACE,aACA,mBACA,yBACA,sBACA,mCACA,qCACA,wCACA,0DACA,mDACA,8BACA,uBACA,0CACA,gBACA,YACA,iBACA,sBACA,cAGF,sCAnDF,WAoDI,kCACA,iCAGF,qCAxDF,WAyDI,gCACA,+BAGF,sDACE,eAGF,8BACE,aACA,sBACA,OAGF,6DAEE,aACA,mBACA,QACA,gBAGF,8BACE,2CACA,yCAGF,+BACE,4CACA,0CAGF,+BACE,qBACA,wCACA,4BAGF,sCACE,4BACA,+CACA,mCAGF,oCACE,qCACA,wDACA,4CAGF,6BACE,aACA,mBACA,qCACA,kCACA,eACA,yBACA,yBACA,4CACA,gCAGF,sBACE,kDACA,gCACA,gBAGF,gEACE,aAGF,2DAEE,kBACA,mBACA,eACA,2BAGF,kDEhLF,0CACA,iDFiLI,+BAGF,qDG9KF,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-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-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-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-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-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);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);color:var(--overline-color)}.list-item .list-item-supporting-text{font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);color:var(--supporting-text-color)}.list-item .list-item-trailing-text{font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);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);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-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-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-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-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-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);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);color:var(--overline-color)}.list-item .list-item-supporting-text{font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);color:var(--supporting-text-color)}.list-item .list-item-trailing-text{font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);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);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