@material/web 2.4.2-nightly.fd6fe2a.0 → 2.5.1-nightly.12ec888.0

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

@@ -8,7 +8,7 @@ import { css } from 'lit';
 export const styles = css `/*!
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */@layer md.sys, md.comp.dependencies;@layer md.comp.fab{.fab{--container-color: transparent;--container-elevation: var(--md-sys-elevation-shadow-3);--container-height: 56px;--container-shape: var(--md-sys-shape-corner-lg);--icon-color: currentColor;--icon-label-space: 12px;--icon-size: 24px;--label-text: var(--md-sys-typescale-label-lg);--label-text-color: currentColor;--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-space: 16px;--trailing-space: 16px}.fab:is(:hover,.hover){--container-elevation: var(--md-sys-elevation-shadow-4)}.fab:is(:active,.active){--container-elevation: var(--md-sys-elevation-shadow-3)}.fab.fab-primary-container{--container-color: var(--md-sys-color-primary-container);--icon-color: var(--md-sys-color-on-primary-container);--label-text-color: var(--md-sys-color-on-primary-container)}.fab.fab-primary{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.fab.fab-secondary-container{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container)}.fab.fab-secondary{--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary);--label-text-color: var(--md-sys-color-on-secondary)}.fab.fab-tertiary-container{--container-color: var(--md-sys-color-tertiary-container);--icon-color: var(--md-sys-color-on-tertiary-container);--label-text-color: var(--md-sys-color-on-tertiary-container)}.fab.fab-tertiary{--container-color: var(--md-sys-color-tertiary);--icon-color: var(--md-sys-color-on-tertiary);--label-text-color: var(--md-sys-color-on-tertiary)}.fab.fab-md{--container-height: 80px;--container-shape: var(--md-sys-shape-corner-lg-increased);--icon-size: 28px;--label-text: var(--md-sys-typescale-title-lg);--label-text-tracking: var(--md-sys-typescale-title-lg-tracking);--leading-space: 26px;--trailing-space: 26px}.fab.fab-lg{--container-height: 96px;--container-shape: var(--md-sys-shape-corner-xl);--icon-label-space: 16px;--icon-size: 36px;--label-text: var(--md-sys-typescale-headline-sm);--label-text-tracking: var(--md-sys-typescale-headline-sm-tracking);--leading-space: 28px;--trailing-space: 28px}.fab{appearance:none;border:none;display:inline-flex;align-items:center;gap:var(--icon-label-space);height:var(--container-height);background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);padding-inline:var(--leading-space) var(--trailing-space);animation:var(--ripple-animation),var(--focus-ring-animation);--md-icon-color: var(--icon-color);--md-icon-size: var(--icon-size)}}
+ */@layer md.sys, md.comp.dependencies;@layer md.comp.fab{.fab{--container-color: transparent;--container-elevation: var(--md-sys-elevation-shadow-3);--container-height: 56px;--container-shape: var(--md-sys-shape-corner-lg);--icon-color: currentColor;--icon-label-space: 12px;--icon-size: 24px;--label-text: var(--md-sys-typescale-label-lg);--label-text-axes: var(--md-sys-typescale-label-lg-axes);--label-text-color: currentColor;--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-space: 16px;--trailing-space: 16px}.fab:is(:hover,.hover){--container-elevation: var(--md-sys-elevation-shadow-4)}.fab:is(:active,.active){--container-elevation: var(--md-sys-elevation-shadow-3)}.fab.fab-primary-container{--container-color: var(--md-sys-color-primary-container);--icon-color: var(--md-sys-color-on-primary-container);--label-text-color: var(--md-sys-color-on-primary-container)}.fab.fab-primary{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.fab.fab-secondary-container{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container)}.fab.fab-secondary{--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary);--label-text-color: var(--md-sys-color-on-secondary)}.fab.fab-tertiary-container{--container-color: var(--md-sys-color-tertiary-container);--icon-color: var(--md-sys-color-on-tertiary-container);--label-text-color: var(--md-sys-color-on-tertiary-container)}.fab.fab-tertiary{--container-color: var(--md-sys-color-tertiary);--icon-color: var(--md-sys-color-on-tertiary);--label-text-color: var(--md-sys-color-on-tertiary)}.fab.fab-md{--container-height: 80px;--container-shape: var(--md-sys-shape-corner-lg-increased);--icon-size: 28px;--label-text: var(--md-sys-typescale-title-lg);--label-text-axes: var(--md-sys-typescale-title-lg-axes);--label-text-tracking: var(--md-sys-typescale-title-lg-tracking);--leading-space: 26px;--trailing-space: 26px}.fab.fab-lg{--container-height: 96px;--container-shape: var(--md-sys-shape-corner-xl);--icon-label-space: 16px;--icon-size: 36px;--label-text: var(--md-sys-typescale-headline-sm);--label-text-axes: var(--md-sys-typescale-headline-sm-axes);--label-text-tracking: var(--md-sys-typescale-headline-sm-tracking);--leading-space: 28px;--trailing-space: 28px}.fab{appearance:none;border:none;display:inline-flex;align-items:center;gap:var(--icon-label-space);height:var(--container-height);background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes);padding-inline:var(--leading-space) var(--trailing-space);animation:var(--ripple-animation),var(--focus-ring-animation);--md-icon-color: var(--icon-color);--md-icon-size: var(--icon-size)}}
 `;
 export default styles.styleSheet;
 //# sourceMappingURL=fab.cssresult.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fab.cssresult.js","sourceRoot":"","sources":["fab.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,6DAA6D;AAC7D,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/fab/fab.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.dependencies;@layer md.comp.fab{.fab{--container-color: transparent;--container-elevation: var(--md-sys-elevation-shadow-3);--container-height: 56px;--container-shape: var(--md-sys-shape-corner-lg);--icon-color: currentColor;--icon-label-space: 12px;--icon-size: 24px;--label-text: var(--md-sys-typescale-label-lg);--label-text-color: currentColor;--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-space: 16px;--trailing-space: 16px}.fab:is(:hover,.hover){--container-elevation: var(--md-sys-elevation-shadow-4)}.fab:is(:active,.active){--container-elevation: var(--md-sys-elevation-shadow-3)}.fab.fab-primary-container{--container-color: var(--md-sys-color-primary-container);--icon-color: var(--md-sys-color-on-primary-container);--label-text-color: var(--md-sys-color-on-primary-container)}.fab.fab-primary{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.fab.fab-secondary-container{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container)}.fab.fab-secondary{--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary);--label-text-color: var(--md-sys-color-on-secondary)}.fab.fab-tertiary-container{--container-color: var(--md-sys-color-tertiary-container);--icon-color: var(--md-sys-color-on-tertiary-container);--label-text-color: var(--md-sys-color-on-tertiary-container)}.fab.fab-tertiary{--container-color: var(--md-sys-color-tertiary);--icon-color: var(--md-sys-color-on-tertiary);--label-text-color: var(--md-sys-color-on-tertiary)}.fab.fab-md{--container-height: 80px;--container-shape: var(--md-sys-shape-corner-lg-increased);--icon-size: 28px;--label-text: var(--md-sys-typescale-title-lg);--label-text-tracking: var(--md-sys-typescale-title-lg-tracking);--leading-space: 26px;--trailing-space: 26px}.fab.fab-lg{--container-height: 96px;--container-shape: var(--md-sys-shape-corner-xl);--icon-label-space: 16px;--icon-size: 36px;--label-text: var(--md-sys-typescale-headline-sm);--label-text-tracking: var(--md-sys-typescale-headline-sm-tracking);--leading-space: 28px;--trailing-space: 28px}.fab{appearance:none;border:none;display:inline-flex;align-items:center;gap:var(--icon-label-space);height:var(--container-height);background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);padding-inline:var(--leading-space) var(--trailing-space);animation:var(--ripple-animation),var(--focus-ring-animation);--md-icon-color: var(--icon-color);--md-icon-size: var(--icon-size)}}\n`;\nexport default styles.styleSheet!;\n"]}
+{"version":3,"file":"fab.cssresult.js","sourceRoot":"","sources":["fab.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,6DAA6D;AAC7D,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/fab/fab.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.dependencies;@layer md.comp.fab{.fab{--container-color: transparent;--container-elevation: var(--md-sys-elevation-shadow-3);--container-height: 56px;--container-shape: var(--md-sys-shape-corner-lg);--icon-color: currentColor;--icon-label-space: 12px;--icon-size: 24px;--label-text: var(--md-sys-typescale-label-lg);--label-text-axes: var(--md-sys-typescale-label-lg-axes);--label-text-color: currentColor;--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-space: 16px;--trailing-space: 16px}.fab:is(:hover,.hover){--container-elevation: var(--md-sys-elevation-shadow-4)}.fab:is(:active,.active){--container-elevation: var(--md-sys-elevation-shadow-3)}.fab.fab-primary-container{--container-color: var(--md-sys-color-primary-container);--icon-color: var(--md-sys-color-on-primary-container);--label-text-color: var(--md-sys-color-on-primary-container)}.fab.fab-primary{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.fab.fab-secondary-container{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container)}.fab.fab-secondary{--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary);--label-text-color: var(--md-sys-color-on-secondary)}.fab.fab-tertiary-container{--container-color: var(--md-sys-color-tertiary-container);--icon-color: var(--md-sys-color-on-tertiary-container);--label-text-color: var(--md-sys-color-on-tertiary-container)}.fab.fab-tertiary{--container-color: var(--md-sys-color-tertiary);--icon-color: var(--md-sys-color-on-tertiary);--label-text-color: var(--md-sys-color-on-tertiary)}.fab.fab-md{--container-height: 80px;--container-shape: var(--md-sys-shape-corner-lg-increased);--icon-size: 28px;--label-text: var(--md-sys-typescale-title-lg);--label-text-axes: var(--md-sys-typescale-title-lg-axes);--label-text-tracking: var(--md-sys-typescale-title-lg-tracking);--leading-space: 26px;--trailing-space: 26px}.fab.fab-lg{--container-height: 96px;--container-shape: var(--md-sys-shape-corner-xl);--icon-label-space: 16px;--icon-size: 36px;--label-text: var(--md-sys-typescale-headline-sm);--label-text-axes: var(--md-sys-typescale-headline-sm-axes);--label-text-tracking: var(--md-sys-typescale-headline-sm-tracking);--leading-space: 28px;--trailing-space: 28px}.fab{appearance:none;border:none;display:inline-flex;align-items:center;gap:var(--icon-label-space);height:var(--container-height);background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes);padding-inline:var(--leading-space) var(--trailing-space);animation:var(--ripple-animation),var(--focus-ring-animation);--md-icon-color: var(--icon-color);--md-icon-size: var(--icon-size)}}\n`;\nexport default styles.styleSheet!;\n"]}

package/labs/gb/components/fab/fab.scss

@@ -68,6 +68,7 @@
       color: var(--label-text-color);
       font: var(--label-text);
       letter-spacing: var(--label-text-tracking);
+      font-variation-settings: var(--label-text-axes);
       padding-inline: var(--leading-space) var(--trailing-space);
       animation: var(--ripple-animation), var(--focus-ring-animation);
       --md-icon-color: var(--icon-color);

package/labs/gb/components/fab/md-gb-fab.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { FabElement } from './fab-element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design component. */
+        'md-gb-fab': FabElement;
+    }
+}

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { FabElement } from './fab-element.js';
+customElements.define('md-gb-fab', FabElement);
+//# sourceMappingURL=md-gb-fab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"md-gb-fab.js","sourceRoot":"","sources":["md-gb-fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAS5C,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {FabElement} from './fab-element.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design component. */\n    'md-gb-fab': FabElement;\n  }\n}\n\ncustomElements.define('md-gb-fab', FabElement);\n"]}

package/labs/gb/components/iconbutton/_icon-button-tokens.scss

@@ -4,6 +4,7 @@
 //
 
 @mixin root {
+  // LINT.IfChange
   --container-color: transparent;
   --container-height: auto;
   --container-shape: calc(var(--container-height) / 2);
@@ -13,6 +14,7 @@
   --outline-width: 1px;
   --leading-space: 0;
   --trailing-space: 0;
+  // LINT.ThenChange(md-icon-button.ts) keep in sync with `@cssprop` jsdoc tags
 }
 
 @mixin selected {

package/labs/gb/components/iconbutton/{md-icon-button.d.ts → icon-button-element.d.ts}

@@ -5,17 +5,25 @@
  */
 import { CSSResultOrNative, LitElement } from 'lit';
 import type { IconButtonColor, IconButtonSize, IconButtonWidth } from './icon-button.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        /** A Material Design icon button component. */
-        '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("../../../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.
+ *
+ * @slot - Used to display an icon.
+ * @fires {InputEvent} input - Fired when a toggle icon button is selected or unselected. --bubbles --composed
+ * @fires {Event} change - Fired when a toggle button is selected or unselected. --bubbles
+ * @csspart icon-btn - The icon button's root element.
+ * @cssprop --container-color
+ * @cssprop --container-height
+ * @cssprop --container-shape
+ * @cssprop --icon-color
+ * @cssprop --icon-size
+ * @cssprop --outline-color
+ * @cssprop --outline-width
+ * @cssprop --leading-space
+ * @cssprop --trailing-space
  */
-export declare class IconButton extends baseClass {
+export declare class IconButtonElement extends baseClass {
     /** @nocollapse */
     static shadowRootOptions: ShadowRootInit;
     static styles: CSSResultOrNative[];

package/labs/gb/components/iconbutton/{md-icon-button.js → icon-button-element.js}

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
 import { redispatchEvent } from '../../../../internal/events/redispatch-event.js';
 import { mixinElementInternals } from '../../../behaviors/element-internals.js';
@@ -18,8 +18,22 @@ import { iconButton } from './icon-button.js';
 const baseClass = mixinDelegatesAria(mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))));
 /**
  * A Material Design icon button component.
+ *
+ * @slot - Used to display an icon.
+ * @fires {InputEvent} input - Fired when a toggle icon button is selected or unselected. --bubbles --composed
+ * @fires {Event} change - Fired when a toggle button is selected or unselected. --bubbles
+ * @csspart icon-btn - The icon button's root element.
+ * @cssprop --container-color
+ * @cssprop --container-height
+ * @cssprop --container-shape
+ * @cssprop --icon-color
+ * @cssprop --icon-size
+ * @cssprop --outline-color
+ * @cssprop --outline-width
+ * @cssprop --leading-space
+ * @cssprop --trailing-space
  */
-let IconButton = class IconButton extends baseClass {
+export class IconButtonElement extends baseClass {
     constructor() {
         super(...arguments);
         /**
@@ -120,13 +134,13 @@ let IconButton = class IconButton extends baseClass {
         this.selected = event.target.ariaPressed === 'true';
         redispatchEvent(this, event);
     }
-};
+}
 /** @nocollapse */
-IconButton.shadowRootOptions = {
+IconButtonElement.shadowRootOptions = {
     mode: 'open',
     delegatesFocus: true,
 };
-IconButton.styles = [
+IconButtonElement.styles = [
     focusRingStyles,
     rippleStyles,
     iconButtonStyles,
@@ -141,36 +155,32 @@ IconButton.styles = [
 ];
 __decorate([
     property()
-], IconButton.prototype, "color", void 0);
+], IconButtonElement.prototype, "color", void 0);
 __decorate([
     property()
-], IconButton.prototype, "size", void 0);
+], IconButtonElement.prototype, "size", void 0);
 __decorate([
     property({ type: Boolean })
-], IconButton.prototype, "square", void 0);
+], IconButtonElement.prototype, "square", void 0);
 __decorate([
     property()
-], IconButton.prototype, "width", void 0);
+], IconButtonElement.prototype, "width", void 0);
 __decorate([
     property({ noAccessor: true })
-], IconButton.prototype, "type", null);
+], IconButtonElement.prototype, "type", null);
 __decorate([
     property({ type: Boolean, attribute: 'soft-disabled', reflect: true })
-], IconButton.prototype, "softDisabled", void 0);
+], IconButtonElement.prototype, "softDisabled", void 0);
 __decorate([
     property({ type: Boolean })
-], IconButton.prototype, "selected", void 0);
+], IconButtonElement.prototype, "selected", void 0);
 __decorate([
     property()
-], IconButton.prototype, "href", void 0);
+], IconButtonElement.prototype, "href", void 0);
 __decorate([
     property()
-], IconButton.prototype, "download", void 0);
+], IconButtonElement.prototype, "download", void 0);
 __decorate([
     property()
-], IconButton.prototype, "target", void 0);
-IconButton = __decorate([
-    customElement('md-icon-button')
-], IconButton);
-export { IconButton };
-//# sourceMappingURL=md-icon-button.js.map
+], IconButtonElement.prototype, "target", void 0);
+//# sourceMappingURL=icon-button-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-element.js","sourceRoot":"","sources":["icon-button-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAC,eAAe,EAAC,MAAM,iDAAiD,CAAC;AAChF,OAAO,EAAC,qBAAqB,EAAC,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAC,mBAAmB,EAAC,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAC,kBAAkB,EAAC,MAAM,sCAAsC,CAAC;AAExE,OAAO,eAAe,MAAM,kCAAkC,CAAC;AAC/D,OAAO,YAAY,MAAM,+BAA+B,CAAC;AACzD,OAAO,gBAAgB,MAAM,4BAA4B,CAAC;AAO1D,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAE5C,MAAM,SAAS,GAAG,kBAAkB,CAClC,kBAAkB,CAAC,mBAAmB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CAAC,CAC3E,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,OAAO,iBAAkB,SAAQ,SAAS;IAAhD;;QAqBE;;WAEG;QACS,UAAK,GAAoB,UAAU,CAAC;QAEhD;;WAEG;QACS,SAAI,GAAmB,IAAI,CAAC;QAExC;;WAEG;QACwB,WAAM,GAAG,KAAK,CAAC;QAE1C;;WAEG;QACS,UAAK,GAAoB,EAAE,CAAC;QAsBxC;;;WAGG;QAEH,iBAAY,GAAG,KAAK,CAAC;QAErB;;WAEG;QACwB,aAAQ,GAAG,KAAK,CAAC;QAE5C;;WAEG;QACS,SAAI,GAAG,EAAE,CAAC;QAEtB;;WAEG;QACS,aAAQ,GAAG,EAAE,CAAC;QAE1B;;WAEG;QACS,WAAM,GAAiD,EAAE,CAAC;IA+CxE,CAAC;IA5FC;;;;;;;;OAQG;IAEH,IAAa,IAAI;QACf,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;IACzC,CAAC;IACD,IAAa,IAAI,CAAC,IAAY;QAC5B,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QACD,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;IACpB,CAAC;IA6BkB,MAAM;QACvB,MAAM,OAAO,GAAG,UAAU,CAAC;YACzB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,YAAY;SAC5B,CAAC,CAAC;QAEH,MAAM,EAAC,SAAS,EAAE,YAAY,EAAE,YAAY,EAAC,GAAG,IAAuB,CAAC;QACxE,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,OAAO,IAAI,CAAA;;gBAED,OAAO;eACR,IAAI,CAAC,IAAI;mBACL,IAAI,CAAC,QAAQ,IAAI,OAAO;iBAC1B,IAAI,CAAC,MAAM,IAAI,OAAO;qBAClB,SAAS,IAAI,OAAO;wBACjB,YAAY,IAAI,OAAO;wBACvB,YAAY,IAAI,OAAO;wBACvB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,IAAI,OAAO;mBAClD,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;;WAE1D,CAAC;QACR,CAAC;QAED,OAAO,IAAI,CAAA;;cAED,OAAO;;kBAEH,IAAI,CAAC,QAAQ;sBACT,IAAI,CAAC,YAAY,IAAI,OAAO;mBAC/B,SAAS,IAAI,OAAO;qBAClB,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;sBAC/C,YAAY,IAAI,OAAO;sBACvB,YAAY,IAAI,OAAO;gBAC7B,IAAI,CAAC,YAAY;;cAEnB,CAAC;IACb,CAAC;IAEO,YAAY,CAAC,KAAY;QAC/B,IAAI,CAAC,QAAQ,GAAI,KAAK,CAAC,MAAsB,CAAC,WAAW,KAAK,MAAM,CAAC;QACrE,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;;AAnID,kBAAkB;AACF,mCAAiB,GAAmB;IAClD,IAAI,EAAE,MAAM;IACZ,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEc,wBAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,gBAAgB;IAChB,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAKU;IAAX,QAAQ,EAAE;gDAAqC;AAKpC;IAAX,QAAQ,EAAE;+CAA6B;AAKb;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;iDAAgB;AAK9B;IAAX,QAAQ,EAAE;gDAA6B;AAYxC;IADC,QAAQ,CAAC,EAAC,UAAU,EAAE,IAAI,EAAC,CAAC;6CAG5B;AAaD;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;uDAChD;AAKM;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;mDAAkB;AAKhC;IAAX,QAAQ,EAAE;+CAAW;AAKV;IAAX,QAAQ,EAAE;mDAAe;AAKd;IAAX,QAAQ,EAAE;iDAA2D","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {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\nconst baseClass = mixinDelegatesAria(\n  mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A Material Design icon button component.\n *\n * @slot - Used to display an icon.\n * @fires {InputEvent} input - Fired when a toggle icon button is selected or unselected. --bubbles --composed\n * @fires {Event} change - Fired when a toggle button is selected or unselected. --bubbles\n * @csspart icon-btn - The icon button's root element.\n * @cssprop --container-color\n * @cssprop --container-height\n * @cssprop --container-shape\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --outline-color\n * @cssprop --outline-width\n * @cssprop --leading-space\n * @cssprop --trailing-space\n */\nexport class IconButtonElement 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/iconbutton/icon-button.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["icon-button.scss","_icon-button-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,wBAEI,UCNF,+BACA,yBACA,qDACA,2BACA,kBACA,6BACA,qBACA,mBACA,oBDCE,qDCGF,iDACA,0CDDE,0BCKF,+CACA,6CDJI,2ECQJ,yDACA,qDDNI,wECUJ,+CACA,6CDPE,yBCWF,2DACA,yDDVI,uECcJ,iDACA,+CDXE,4BCeF,qDACA,qDDdI,0ECkBJ,uDACA,qDDfE,4BCmBF,qDDjBI,0ECqBJ,0CDjBE,sBCqBF,yBACA,kBACA,qBACA,sBDtBI,8CC0BJ,qBACA,sBDxBI,4CC4BJ,sBACA,uBDzBE,sBC6BF,yBACA,qBACA,sBD7BI,8CCiCJ,qBACA,sBD/BI,4CCmCJ,sBACA,uBDhCE,sBCoCF,yBACA,sBACA,uBDpCI,8CCwCJ,sBACA,uBDtCI,4CC0CJ,sBACA,uBDxCI,oEC4CJ,iDDxCE,sBC4CF,yBACA,kBACA,sBACA,uBD7CI,8CCiDJ,sBACA,uBD/CI,4CCmDJ,sBACA,qBACA,uBDlDI,oECsDJ,iDDlDE,sBCsDF,0BACA,kBACA,sBACA,qBACA,uBDxDI,8CC4DJ,sBACA,uBD1DI,4CC8DJ,sBACA,uBD5DI,oECgEJ,iDD5DE,0BCgEF,iDD9DI,8CCkEJ,iDD/DI,8CCmEJ,iDDhEI,8CCoEJ,iDDjEI,wECqEJ,qDDjEE,+DCqEF,iDDnEI,mFCuEJ,iDDpEI,mFCwEJ,iDDrEI,mFCyEJ,iDDrEE,kCCyEF,wEACA,mEDtEE,UACE,oBACA,mBACA,wCACA,uDACA,qCACA,+BACA,wBACA,WACE,iFAEF,iCAGF,+CACE,eAGF,8CACE","file":"icon-button.css"}
+{"version":3,"sourceRoot":"","sources":["icon-button.scss","_icon-button-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,wBAEI,UCLF,+BACA,yBACA,qDACA,2BACA,kBACA,6BACA,qBACA,mBACA,yEAKA,iDACA,0CDHE,0BCOF,+CACA,6CDNI,2ECUJ,yDACA,qDDRI,wECYJ,+CACA,6CDTE,yBCaF,2DACA,yDDZI,uECgBJ,iDACA,+CDbE,4BCiBF,qDACA,qDDhBI,0ECoBJ,uDACA,qDDjBE,4BCqBF,qDDnBI,0ECuBJ,0CDnBE,sBCuBF,yBACA,kBACA,qBACA,sBDxBI,8CC4BJ,qBACA,sBD1BI,4CC8BJ,sBACA,uBD3BE,sBC+BF,yBACA,qBACA,sBD/BI,8CCmCJ,qBACA,sBDjCI,4CCqCJ,sBACA,uBDlCE,sBCsCF,yBACA,sBACA,uBDtCI,8CC0CJ,sBACA,uBDxCI,4CC4CJ,sBACA,uBD1CI,oEC8CJ,iDD1CE,sBC8CF,yBACA,kBACA,sBACA,uBD/CI,8CCmDJ,sBACA,uBDjDI,4CCqDJ,sBACA,qBACA,uBDpDI,oECwDJ,iDDpDE,sBCwDF,0BACA,kBACA,sBACA,qBACA,uBD1DI,8CC8DJ,sBACA,uBD5DI,4CCgEJ,sBACA,uBD9DI,oECkEJ,iDD9DE,0BCkEF,iDDhEI,8CCoEJ,iDDjEI,8CCqEJ,iDDlEI,8CCsEJ,iDDnEI,wECuEJ,qDDnEE,+DCuEF,iDDrEI,mFCyEJ,iDDtEI,mFC0EJ,iDDvEI,mFC2EJ,iDDvEE,kCC2EF,wEACA,mEDxEE,UACE,oBACA,mBACA,wCACA,uDACA,qCACA,+BACA,wBACA,WACE,iFAEF,iCAGF,+CACE,eAGF,8CACE","file":"icon-button.css"}

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

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { IconButtonElement } from './icon-button-element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design component. */
+        'md-gb-icon-button': IconButtonElement;
+    }
+}

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { IconButtonElement } from './icon-button-element.js';
+customElements.define('md-gb-icon-button', IconButtonElement);
+//# sourceMappingURL=md-gb-icon-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"md-gb-icon-button.js","sourceRoot":"","sources":["md-gb-icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,iBAAiB,EAAC,MAAM,0BAA0B,CAAC;AAS3D,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {IconButtonElement} from './icon-button-element.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design component. */\n    'md-gb-icon-button': IconButtonElement;\n  }\n}\n\ncustomElements.define('md-gb-icon-button', IconButtonElement);\n"]}

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

@@ -4,8 +4,10 @@
 //
 
 @mixin root {
+  // LINT.IfChange
   --container-shape: var(--md-sys-shape-corner-lg);
   --gap: 0;
+  // LINT.ThenChange(list-element.ts) keep in sync with `@cssprop` jsdoc tags
 }
 
 @mixin segmented {
@@ -13,11 +15,13 @@
 }
 
 @mixin item {
+  // LINT.IfChange
   --container-height: 56px;
   --container-color: transparent;
   --container-shape: var(--md-sys-shape-corner-xs);
   --label-text-color: var(--md-sys-color-on-surface);
   --label-text: var(--md-sys-typescale-body-lg);
+  --label-text-axes: var(--md-sys-typescale-body-lg-axes);
   --label-text-tracking: var(--md-sys-typescale-body-lg-tracking);
   --leading-space: 16px;
   --trailing-space: 16px;
@@ -28,6 +32,7 @@
   --avatar-shape: var(--md-sys-shape-corner-full);
   --avatar-color: var(--md-sys-color-primary-container);
   --avatar-label: var(--md-sys-typescale-title-md);
+  --avatar-label-axes: var(--md-sys-typescale-title-md-axes);
   --avatar-label-tracking: var(--md-sys-typescale-title-md-tracking);
   --avatar-label-color: var(--md-sys-color-on-primary-container);
   --leading-icon-color: var(--md-sys-color-on-surface-variant);
@@ -35,16 +40,20 @@
   --trailing-icon-color: var(--md-sys-color-on-surface-variant);
   --trailing-icon-size: 20px;
   --overline: var(--md-sys-typescale-label-sm);
+  --overline-axes: var(--md-sys-typescale-label-sm-axes);
   --overline-tracking: var(--md-sys-typescale-label-sm-tracking);
   --overline-color: var(--md-sys-color-on-surface-variant);
   --supporting-text: var(--md-sys-typescale-body-md);
+  --supporting-text-axes: var(--md-sys-typescale-body-md-axes);
   --supporting-text-tracking: var(--md-sys-typescale-body-md-tracking);
   --supporting-text-color: var(--md-sys-color-on-surface-variant);
   --trailing-supporting-text: var(--md-sys-typescale-label-sm);
+  --trailing-supporting-text-axes: var(--md-sys-typescale-label-sm-axes);
   --trailing-supporting-text-tracking: var(
     --md-sys-typescale-label-sm-tracking
   );
   --trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);
+  // LINT.ThenChange(list-item-element.ts) keep in sync with `@cssprop` jsdoc tags
 }
 
 @mixin item-segmented {
@@ -77,25 +86,17 @@
   --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
-  );
+  --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%
-  );
+  --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%
-  );
+  --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/{md-list.d.ts → list-element.d.ts}

@@ -4,17 +4,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { CSSResultOrNative, LitElement } from 'lit';
-declare global {
-    interface HTMLElementTagNameMap {
-        /** A Material Design list component. */
-        'md-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 {
+export declare class ListElement extends baseClass {
     static styles: CSSResultOrNative[];
     constructor();
     /**

package/labs/gb/components/list/{md-list.js → list-element.js}

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { internals, mixinElementInternals, } from '../../../behaviors/element-internals.js';
 import listStyles from './list.css' with { type: 'css' }; // github-only
 // import {styles as listStyles} from './list.cssresult.js'; // google3-only
@@ -14,8 +14,13 @@ import { list } from './list.js';
 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 {
+export class ListElement extends baseClass {
     constructor() {
         super();
         /**
@@ -29,8 +34,8 @@ let List = class List extends baseClass {
       <slot></slot>
     </div>`;
     }
-};
-List.styles = [
+}
+ListElement.styles = [
     listStyles,
     css `
       :host {
@@ -43,9 +48,5 @@ List.styles = [
 ];
 __decorate([
     property({ type: Boolean })
-], List.prototype, "segmented", void 0);
-List = __decorate([
-    customElement('md-list')
-], List);
-export { List };
-//# sourceMappingURL=md-list.js.map
+], ListElement.prototype, "segmented", void 0);
+//# sourceMappingURL=list-element.js.map

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

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

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

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

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
 import { internals, mixinElementInternals, } from '../../../behaviors/element-internals.js';
 import { hasSlotted } from '../shared/has-slotted.js';
@@ -20,8 +20,51 @@ import { listItem } from './list.js';
 const baseClass = mixinDelegatesAria(mixinElementInternals(LitElement));
 /**
  * A Material Design list item component.
+ *
+ * @slot - Used to display the item's primary label.
+ * @slot avatar - Used to display a circular avatar before the item's content.
+ * @slot leading - Used to display icons and content before the item's main content.
+ * @slot overline - Used to display overline text above the main label.
+ * @slot supporting-text - Used to display supporting text below the main label.
+ * @slot trailing-text - Used to display metadata or text after the item's main content.
+ * @slot trailing - Used to display icons and content after the item's main content.
+ * @csspart list-item - The list item's root element.
+ * @cssprop --container-height
+ * @cssprop --container-color
+ * @cssprop --container-shape
+ * @cssprop --label-text-color
+ * @cssprop --label-text
+ * @cssprop --label-text-tracking
+ * @cssprop --leading-space
+ * @cssprop --trailing-space
+ * @cssprop --between-space
+ * @cssprop --top-space
+ * @cssprop --bottom-space
+ * @cssprop --avatar-size
+ * @cssprop --avatar-shape
+ * @cssprop --avatar-color
+ * @cssprop --avatar-label
+ * @cssprop --avatar-label-axes
+ * @cssprop --avatar-label-tracking
+ * @cssprop --avatar-label-color
+ * @cssprop --leading-icon-color
+ * @cssprop --leading-icon-size
+ * @cssprop --trailing-icon-color
+ * @cssprop --trailing-icon-size
+ * @cssprop --overline
+ * @cssprop --overline-axes
+ * @cssprop --overline-tracking
+ * @cssprop --overline-color
+ * @cssprop --supporting-text
+ * @cssprop --supporting-text-axes
+ * @cssprop --supporting-text-tracking
+ * @cssprop --supporting-text-color
+ * @cssprop --trailing-supporting-text
+ * @cssprop --trailing-supporting-text-axes
+ * @cssprop --trailing-supporting-text-tracking
+ * @cssprop --trailing-supporting-text-color
  */
-let ListItem = class ListItem extends baseClass {
+export class ListItemElement extends baseClass {
     constructor() {
         super();
         /**
@@ -79,13 +122,13 @@ let ListItem = class ListItem extends baseClass {
       </span>
     `;
     }
-};
+}
 /** @nocollapse */
-ListItem.shadowRootOptions = {
+ListItemElement.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
-ListItem.styles = [
+ListItemElement.styles = [
     focusRingStyles,
     rippleStyles,
     listStyles,
@@ -108,15 +151,11 @@ ListItem.styles = [
 ];
 __decorate([
     property({ type: Boolean })
-], ListItem.prototype, "checked", void 0);
+], ListItemElement.prototype, "checked", void 0);
 __decorate([
     property({ type: Boolean })
-], ListItem.prototype, "disabled", void 0);
+], ListItemElement.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'static' })
-], ListItem.prototype, "nonInteractive", void 0);
-ListItem = __decorate([
-    customElement('md-list-item')
-], ListItem);
-export { ListItem };
-//# sourceMappingURL=md-list-item.js.map
+], ListItemElement.prototype, "nonInteractive", void 0);
+//# sourceMappingURL=list-item-element.js.map