@material/web 2.5.1-nightly.56a486b.0 → 2.5.1-nightly.703aed2.0

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

@@ -61,6 +61,8 @@ export class IconButtonElement extends baseClass {
         this.softDisabled = false;
         /**
          * Whether or not the button is selected, when `type="toggle"`.
+         *
+         * TODO: replace reflected `[selected]` with `:state(selected)`
          */
         this.selected = false;
         /**
@@ -110,6 +112,7 @@ export class IconButtonElement extends baseClass {
             size: this.size,
             width: this.width,
             square: this.square,
+            selected: this.type === 'toggle' ? this.selected : undefined,
             disabled: this.softDisabled,
         });
         const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
@@ -161,8 +164,18 @@ IconButtonElement.styles = [
     iconButtonStyles,
     css `
       :host {
+        --md-icon-fill: 1;
         display: inline-flex;
       }
+
+      :host([type='toggle']:not([selected])) {
+        --md-icon-fill: 0;
+      }
+
+      :host([type='toggle'][selected]) {
+        --md-icon-fill: 1;
+      }
+
       .icon-btn {
         flex: 1;
       }
@@ -181,13 +194,13 @@ __decorate([
     property()
 ], IconButtonElement.prototype, "width", void 0);
 __decorate([
-    property({ noAccessor: true })
+    property({ noAccessor: true, reflect: true })
 ], IconButtonElement.prototype, "type", null);
 __decorate([
     property({ type: Boolean, attribute: 'soft-disabled', reflect: true })
 ], IconButtonElement.prototype, "softDisabled", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], IconButtonElement.prototype, "selected", void 0);
 __decorate([
     property()

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button-element.js","sourceRoot":"","sources":["icon-button-element.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 {property} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {safeHref} from '../../../../internal/directives/safe-href.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 --leading-space\n * @cssprop --md-icon-fill\n * @cssprop --outline-color\n * @cssprop --outline-width\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  /** @nocollapse */\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  /**\n   * Sets the underlying `HTMLAnchorElement`'s `rel` attribute when `href` is\n   * set.\n   */\n  @property() rel = '';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `referrerpolicy` attribute when\n   * `href` is set.\n   */\n  @property() referrerPolicy = '';\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=${safeHref(this.href)}\n        download=${this.download || nothing}\n        target=${this.target || nothing}\n        rel=${this.rel || nothing}\n        referrerpolicy=${this.referrerPolicy || 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":"icon-button-element.js","sourceRoot":"","sources":["icon-button-element.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 {property} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {safeHref} from '../../../../internal/directives/safe-href.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 --leading-space\n * @cssprop --md-icon-fill\n * @cssprop --outline-color\n * @cssprop --outline-width\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  /** @nocollapse */\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    iconButtonStyles,\n    css`\n      :host {\n        --md-icon-fill: 1;\n        display: inline-flex;\n      }\n\n      :host([type='toggle']:not([selected])) {\n        --md-icon-fill: 0;\n      }\n\n      :host([type='toggle'][selected]) {\n        --md-icon-fill: 1;\n      }\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, reflect: 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   * TODO: replace reflected `[selected]` with `:state(selected)`\n   */\n  @property({type: Boolean, reflect: true}) 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  /**\n   * Sets the underlying `HTMLAnchorElement`'s `rel` attribute when `href` is\n   * set.\n   */\n  @property() rel = '';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `referrerpolicy` attribute when\n   * `href` is set.\n   */\n  @property() referrerPolicy = '';\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      selected: this.type === 'toggle' ? this.selected : undefined,\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=${safeHref(this.href)}\n        download=${this.download || nothing}\n        target=${this.target || nothing}\n        rel=${this.rel || nothing}\n        referrerpolicy=${this.referrerPolicy || 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

@@ -1,4 +1,4 @@
 /*!
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.icon-btn{.icon-btn{--container-color: transparent;--container-height: auto;--container-shape: calc(var(--container-height) / 2);--icon-color: currentColor;--icon-size: 24px;--leading-space: 0;--md-icon-fill: 1;--outline-color: transparent;--outline-width: 0;--trailing-space: 0}.icon-btn:where(.icon-btn-unselected,[aria-pressed=false]){--md-icon-fill: 0}.icon-btn:is(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-md);--icon-color: var(--md-sys-color-primary);--md-icon-fill: 1}.icon-btn.icon-btn-filled{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.icon-btn.icon-btn-filled:where(.icon-btn-unselected,[aria-pressed=false]){--container-color: var(--md-sys-color-surface-container);--icon-color: var(--md-sys-color-on-surface-variant)}.icon-btn.icon-btn-filled:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.icon-btn.icon-btn-tonal{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container)}.icon-btn.icon-btn-tonal:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary)}.icon-btn.icon-btn-outlined{--icon-color: var(--md-sys-color-on-surface-variant);--outline-color: var(--md-sys-color-outline-variant)}.icon-btn.icon-btn-outlined:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-inverse-surface);--icon-color: var(--md-sys-color-inverse-on-surface)}.icon-btn.icon-btn-standard{--icon-color: var(--md-sys-color-on-surface-variant)}.icon-btn.icon-btn-standard:where(.icon-btn-selected,[aria-pressed=true]){--icon-color: var(--md-sys-color-primary)}.icon-btn.icon-btn-xs{--container-height: 32px;--icon-size: 20px;--leading-space: 6px;--outline-width: 1px;--trailing-space: 6px}.icon-btn.icon-btn-xs:where(.icon-btn-narrow){--leading-space: 4px;--trailing-space: 4px}.icon-btn.icon-btn-xs:where(.icon-btn-wide){--leading-space: 10px;--trailing-space: 10px}.icon-btn.icon-btn-sm{--container-height: 40px;--leading-space: 8px;--outline-width: 1px;--trailing-space: 8px}.icon-btn.icon-btn-sm:where(.icon-btn-narrow){--leading-space: 4px;--trailing-space: 4px}.icon-btn.icon-btn-sm:where(.icon-btn-wide){--leading-space: 14px;--trailing-space: 14px}.icon-btn.icon-btn-md{--container-height: 56px;--leading-space: 16px;--outline-width: 1px;--trailing-space: 16px}.icon-btn.icon-btn-md:where(.icon-btn-narrow){--leading-space: 12px;--trailing-space: 12px}.icon-btn.icon-btn-md:where(.icon-btn-wide){--leading-space: 24px;--trailing-space: 24px}.icon-btn.icon-btn-md:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn.icon-btn-lg{--container-height: 96px;--icon-size: 32px;--leading-space: 32px;--outline-width: 2px;--trailing-space: 32px}.icon-btn.icon-btn-lg:where(.icon-btn-narrow){--leading-space: 16px;--trailing-space: 16px}.icon-btn.icon-btn-lg:where(.icon-btn-wide){--leading-space: 48px;--trailing-space: 48px}.icon-btn.icon-btn-lg:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-xl{--container-height: 136px;--icon-size: 40px;--leading-space: 48px;--outline-width: 3px;--trailing-space: 48px}.icon-btn.icon-btn-xl:where(.icon-btn-narrow){--leading-space: 32px;--trailing-space: 32px}.icon-btn.icon-btn-xl:where(.icon-btn-wide){--leading-space: 72px;--trailing-space: 72px}.icon-btn.icon-btn-xl:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square{--container-shape: var(--md-sys-shape-corner-md)}.icon-btn.icon-btn-square:where(.icon-btn-md){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn.icon-btn-square:where(.icon-btn-lg){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square:where(.icon-btn-xl){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: calc(var(--container-height) / 2)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-sm)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-md){--container-shape: var(--md-sys-shape-corner-md)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-lg){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-xl){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn:is(:disabled,.disabled){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.icon-btn{display:inline-grid;place-items:center;background-color:var(--container-color);border:var(--outline-width) solid var(--outline-color);border-radius:var(--container-shape);height:var(--container-height);color:var(--icon-color);transition:border-radius 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9),var(--ripple-transition);--md-icon-size: var(--icon-size)}.icon-btn:not(.icon-btn-narrow,.icon-btn-wide){aspect-ratio:1}.icon-btn:is(.icon-btn-narrow,.icon-btn-wide){padding-inline:var(--leading-space) var(--trailing-space)}.icon-btn:not(:disabled,.disabled){cursor:pointer}}/*# sourceMappingURL=icon-button.css.map */
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.icon-btn{.icon-btn{--container-color: transparent;--container-height: auto;--container-shape: calc(var(--container-height) / 2);--icon-color: currentColor;--icon-size: 24px;--leading-space: 0;--md-icon-fill: 1;--outline-color: transparent;--outline-width: 0;--trailing-space: 0}.icon-btn:where(.icon-btn-unselected,[aria-pressed=false]){--md-icon-fill: 0}.icon-btn:is(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-md);--icon-color: var(--md-sys-color-primary);--md-icon-fill: 1}.icon-btn.icon-btn-filled{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.icon-btn.icon-btn-filled:where(.icon-btn-unselected,[aria-pressed=false]){--container-color: var(--md-sys-color-surface-container);--icon-color: var(--md-sys-color-on-surface-variant)}.icon-btn.icon-btn-filled:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.icon-btn.icon-btn-tonal{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container)}.icon-btn.icon-btn-tonal:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary)}.icon-btn.icon-btn-outlined{--icon-color: var(--md-sys-color-on-surface-variant);--outline-color: var(--md-sys-color-outline-variant)}.icon-btn.icon-btn-outlined:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-inverse-surface);--icon-color: var(--md-sys-color-inverse-on-surface)}.icon-btn.icon-btn-standard{--icon-color: var(--md-sys-color-on-surface-variant)}.icon-btn.icon-btn-standard:where(.icon-btn-selected,[aria-pressed=true]){--icon-color: var(--md-sys-color-primary)}.icon-btn.icon-btn-xs{--container-height: 32px;--icon-size: 20px;--leading-space: 6px;--outline-width: 1px;--trailing-space: 6px}.icon-btn.icon-btn-xs:where(.icon-btn-narrow){--leading-space: 4px;--trailing-space: 4px}.icon-btn.icon-btn-xs:where(.icon-btn-wide){--leading-space: 10px;--trailing-space: 10px}.icon-btn.icon-btn-sm{--container-height: 40px;--leading-space: 8px;--outline-width: 1px;--trailing-space: 8px}.icon-btn.icon-btn-sm:where(.icon-btn-narrow){--leading-space: 4px;--trailing-space: 4px}.icon-btn.icon-btn-sm:where(.icon-btn-wide){--leading-space: 14px;--trailing-space: 14px}.icon-btn.icon-btn-md{--container-height: 56px;--leading-space: 16px;--outline-width: 1px;--trailing-space: 16px}.icon-btn.icon-btn-md:where(.icon-btn-narrow){--leading-space: 12px;--trailing-space: 12px}.icon-btn.icon-btn-md:where(.icon-btn-wide){--leading-space: 24px;--trailing-space: 24px}.icon-btn.icon-btn-md:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn.icon-btn-lg{--container-height: 96px;--icon-size: 32px;--leading-space: 32px;--outline-width: 2px;--trailing-space: 32px}.icon-btn.icon-btn-lg:where(.icon-btn-narrow){--leading-space: 16px;--trailing-space: 16px}.icon-btn.icon-btn-lg:where(.icon-btn-wide){--leading-space: 48px;--trailing-space: 48px}.icon-btn.icon-btn-lg:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-xl{--container-height: 136px;--icon-size: 40px;--leading-space: 48px;--outline-width: 3px;--trailing-space: 48px}.icon-btn.icon-btn-xl:where(.icon-btn-narrow){--leading-space: 32px;--trailing-space: 32px}.icon-btn.icon-btn-xl:where(.icon-btn-wide){--leading-space: 72px;--trailing-space: 72px}.icon-btn.icon-btn-xl:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square{--container-shape: var(--md-sys-shape-corner-md)}.icon-btn.icon-btn-square:where(.icon-btn-md){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn.icon-btn-square:where(.icon-btn-lg){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square:where(.icon-btn-xl){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: calc(var(--container-height) / 2)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-sm)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-md){--container-shape: var(--md-sys-shape-corner-md)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-lg){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-xl){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn:is(:disabled,.disabled){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.icon-btn{display:inline-grid;place-items:center;background-color:var(--container-color);border:var(--outline-width) solid var(--outline-color);border-radius:var(--container-shape);height:var(--container-height);color:var(--icon-color);transition:border-radius 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9),var(--ripple-transition);--md-icon-color: var(--icon-color);--md-icon-size: var(--icon-size)}.icon-btn:not(.icon-btn-narrow,.icon-btn-wide){aspect-ratio:1}.icon-btn:is(.icon-btn-narrow,.icon-btn-wide){padding-inline:var(--leading-space) var(--trailing-space)}.icon-btn:not(:disabled,.disabled){cursor:pointer}}/*# sourceMappingURL=icon-button.css.map */

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,UCLF,+BACA,yBACA,qDACA,2BACA,kBACA,mBACA,kBACA,6BACA,mBACA,oBDDE,2DCMF,kBDHE,qDCOF,iDACA,0CACA,kBDNE,0BCUF,+CACA,6CDTI,2ECaJ,yDACA,qDDXI,wECeJ,+CACA,6CDZE,yBCgBF,2DACA,yDDfI,uECmBJ,iDACA,+CDhBE,4BCoBF,qDACA,qDDnBI,0ECuBJ,uDACA,qDDpBE,4BCwBF,qDDtBI,0EC0BJ,0CDtBE,sBC0BF,yBACA,kBACA,qBACA,qBACA,sBD5BI,8CCgCJ,qBACA,sBD9BI,4CCkCJ,sBACA,uBD/BE,sBCmCF,yBACA,qBACA,qBACA,sBDpCI,8CCwCJ,qBACA,sBDtCI,4CC0CJ,sBACA,uBDvCE,sBC2CF,yBACA,sBACA,qBACA,uBD5CI,8CCgDJ,sBACA,uBD9CI,4CCkDJ,sBACA,uBDhDI,oECoDJ,iDDhDE,sBCoDF,yBACA,kBACA,sBACA,qBACA,uBDtDI,8CC0DJ,sBACA,uBDxDI,4CC4DJ,sBACA,uBD1DI,oEC8DJ,iDD1DE,sBC8DF,0BACA,kBACA,sBACA,qBACA,uBDhEI,8CCoEJ,sBACA,uBDlEI,4CCsEJ,sBACA,uBDpEI,oECwEJ,iDDpEE,0BCwEF,iDDtEI,8CC0EJ,iDDvEI,8CC2EJ,iDDxEI,8CC4EJ,iDDzEI,wEC6EJ,qDDzEE,+DC6EF,iDD3EI,mFC+EJ,iDD5EI,mFCgFJ,iDD7EI,mFCiFJ,iDD7EE,kCCiFF,wEACA,mED9EE,UACE,oBACA,mBACA,wCACA,uDACA,qCACA,+BACA,wBACA,WACE,iFAEF,iCAGF,+CACE,eAGF,8CACE,0DAGF,mCACE","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,mBACA,kBACA,6BACA,mBACA,oBDDE,2DCMF,kBDHE,qDCOF,iDACA,0CACA,kBDNE,0BCUF,+CACA,6CDTI,2ECaJ,yDACA,qDDXI,wECeJ,+CACA,6CDZE,yBCgBF,2DACA,yDDfI,uECmBJ,iDACA,+CDhBE,4BCoBF,qDACA,qDDnBI,0ECuBJ,uDACA,qDDpBE,4BCwBF,qDDtBI,0EC0BJ,0CDtBE,sBC0BF,yBACA,kBACA,qBACA,qBACA,sBD5BI,8CCgCJ,qBACA,sBD9BI,4CCkCJ,sBACA,uBD/BE,sBCmCF,yBACA,qBACA,qBACA,sBDpCI,8CCwCJ,qBACA,sBDtCI,4CC0CJ,sBACA,uBDvCE,sBC2CF,yBACA,sBACA,qBACA,uBD5CI,8CCgDJ,sBACA,uBD9CI,4CCkDJ,sBACA,uBDhDI,oECoDJ,iDDhDE,sBCoDF,yBACA,kBACA,sBACA,qBACA,uBDtDI,8CC0DJ,sBACA,uBDxDI,4CC4DJ,sBACA,uBD1DI,oEC8DJ,iDD1DE,sBC8DF,0BACA,kBACA,sBACA,qBACA,uBDhEI,8CCoEJ,sBACA,uBDlEI,4CCsEJ,sBACA,uBDpEI,oECwEJ,iDDpEE,0BCwEF,iDDtEI,8CC0EJ,iDDvEI,8CC2EJ,iDDxEI,8CC4EJ,iDDzEI,wEC6EJ,qDDzEE,+DC6EF,iDD3EI,mFC+EJ,iDD5EI,mFCgFJ,iDD7EI,mFCiFJ,iDD7EE,kCCiFF,wEACA,mED9EE,UACE,oBACA,mBACA,wCACA,uDACA,qCACA,+BACA,wBACA,WACE,iFAEF,mCACA,iCAGF,+CACE,eAGF,8CACE,0DAGF,mCACE","file":"icon-button.css"}

package/labs/gb/components/iconbutton/icon-button.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.ripple, md.comp.focus-ring;@layer md.comp.icon-btn{.icon-btn{--container-color: transparent;--container-height: auto;--container-shape: calc(var(--container-height) / 2);--icon-color: currentColor;--icon-size: 24px;--leading-space: 0;--md-icon-fill: 1;--outline-color: transparent;--outline-width: 0;--trailing-space: 0}.icon-btn:where(.icon-btn-unselected,[aria-pressed=false]){--md-icon-fill: 0}.icon-btn:is(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-md);--icon-color: var(--md-sys-color-primary);--md-icon-fill: 1}.icon-btn.icon-btn-filled{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.icon-btn.icon-btn-filled:where(.icon-btn-unselected,[aria-pressed=false]){--container-color: var(--md-sys-color-surface-container);--icon-color: var(--md-sys-color-on-surface-variant)}.icon-btn.icon-btn-filled:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.icon-btn.icon-btn-tonal{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container)}.icon-btn.icon-btn-tonal:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary)}.icon-btn.icon-btn-outlined{--icon-color: var(--md-sys-color-on-surface-variant);--outline-color: var(--md-sys-color-outline-variant)}.icon-btn.icon-btn-outlined:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-inverse-surface);--icon-color: var(--md-sys-color-inverse-on-surface)}.icon-btn.icon-btn-standard{--icon-color: var(--md-sys-color-on-surface-variant)}.icon-btn.icon-btn-standard:where(.icon-btn-selected,[aria-pressed=true]){--icon-color: var(--md-sys-color-primary)}.icon-btn.icon-btn-xs{--container-height: 32px;--icon-size: 20px;--leading-space: 6px;--outline-width: 1px;--trailing-space: 6px}.icon-btn.icon-btn-xs:where(.icon-btn-narrow){--leading-space: 4px;--trailing-space: 4px}.icon-btn.icon-btn-xs:where(.icon-btn-wide){--leading-space: 10px;--trailing-space: 10px}.icon-btn.icon-btn-sm{--container-height: 40px;--leading-space: 8px;--outline-width: 1px;--trailing-space: 8px}.icon-btn.icon-btn-sm:where(.icon-btn-narrow){--leading-space: 4px;--trailing-space: 4px}.icon-btn.icon-btn-sm:where(.icon-btn-wide){--leading-space: 14px;--trailing-space: 14px}.icon-btn.icon-btn-md{--container-height: 56px;--leading-space: 16px;--outline-width: 1px;--trailing-space: 16px}.icon-btn.icon-btn-md:where(.icon-btn-narrow){--leading-space: 12px;--trailing-space: 12px}.icon-btn.icon-btn-md:where(.icon-btn-wide){--leading-space: 24px;--trailing-space: 24px}.icon-btn.icon-btn-md:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn.icon-btn-lg{--container-height: 96px;--icon-size: 32px;--leading-space: 32px;--outline-width: 2px;--trailing-space: 32px}.icon-btn.icon-btn-lg:where(.icon-btn-narrow){--leading-space: 16px;--trailing-space: 16px}.icon-btn.icon-btn-lg:where(.icon-btn-wide){--leading-space: 48px;--trailing-space: 48px}.icon-btn.icon-btn-lg:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-xl{--container-height: 136px;--icon-size: 40px;--leading-space: 48px;--outline-width: 3px;--trailing-space: 48px}.icon-btn.icon-btn-xl:where(.icon-btn-narrow){--leading-space: 32px;--trailing-space: 32px}.icon-btn.icon-btn-xl:where(.icon-btn-wide){--leading-space: 72px;--trailing-space: 72px}.icon-btn.icon-btn-xl:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square{--container-shape: var(--md-sys-shape-corner-md)}.icon-btn.icon-btn-square:where(.icon-btn-md){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn.icon-btn-square:where(.icon-btn-lg){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square:where(.icon-btn-xl){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: calc(var(--container-height) / 2)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-sm)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-md){--container-shape: var(--md-sys-shape-corner-md)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-lg){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-xl){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn:is(:disabled,.disabled){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.icon-btn{display:inline-grid;place-items:center;background-color:var(--container-color);border:var(--outline-width) solid var(--outline-color);border-radius:var(--container-shape);height:var(--container-height);color:var(--icon-color);transition:border-radius 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9),var(--ripple-transition);--md-icon-size: var(--icon-size)}.icon-btn:not(.icon-btn-narrow,.icon-btn-wide){aspect-ratio:1}.icon-btn:is(.icon-btn-narrow,.icon-btn-wide){padding-inline:var(--leading-space) var(--trailing-space)}.icon-btn:not(:disabled,.disabled){cursor:pointer}}
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.icon-btn{.icon-btn{--container-color: transparent;--container-height: auto;--container-shape: calc(var(--container-height) / 2);--icon-color: currentColor;--icon-size: 24px;--leading-space: 0;--md-icon-fill: 1;--outline-color: transparent;--outline-width: 0;--trailing-space: 0}.icon-btn:where(.icon-btn-unselected,[aria-pressed=false]){--md-icon-fill: 0}.icon-btn:is(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-md);--icon-color: var(--md-sys-color-primary);--md-icon-fill: 1}.icon-btn.icon-btn-filled{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.icon-btn.icon-btn-filled:where(.icon-btn-unselected,[aria-pressed=false]){--container-color: var(--md-sys-color-surface-container);--icon-color: var(--md-sys-color-on-surface-variant)}.icon-btn.icon-btn-filled:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.icon-btn.icon-btn-tonal{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container)}.icon-btn.icon-btn-tonal:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary)}.icon-btn.icon-btn-outlined{--icon-color: var(--md-sys-color-on-surface-variant);--outline-color: var(--md-sys-color-outline-variant)}.icon-btn.icon-btn-outlined:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-inverse-surface);--icon-color: var(--md-sys-color-inverse-on-surface)}.icon-btn.icon-btn-standard{--icon-color: var(--md-sys-color-on-surface-variant)}.icon-btn.icon-btn-standard:where(.icon-btn-selected,[aria-pressed=true]){--icon-color: var(--md-sys-color-primary)}.icon-btn.icon-btn-xs{--container-height: 32px;--icon-size: 20px;--leading-space: 6px;--outline-width: 1px;--trailing-space: 6px}.icon-btn.icon-btn-xs:where(.icon-btn-narrow){--leading-space: 4px;--trailing-space: 4px}.icon-btn.icon-btn-xs:where(.icon-btn-wide){--leading-space: 10px;--trailing-space: 10px}.icon-btn.icon-btn-sm{--container-height: 40px;--leading-space: 8px;--outline-width: 1px;--trailing-space: 8px}.icon-btn.icon-btn-sm:where(.icon-btn-narrow){--leading-space: 4px;--trailing-space: 4px}.icon-btn.icon-btn-sm:where(.icon-btn-wide){--leading-space: 14px;--trailing-space: 14px}.icon-btn.icon-btn-md{--container-height: 56px;--leading-space: 16px;--outline-width: 1px;--trailing-space: 16px}.icon-btn.icon-btn-md:where(.icon-btn-narrow){--leading-space: 12px;--trailing-space: 12px}.icon-btn.icon-btn-md:where(.icon-btn-wide){--leading-space: 24px;--trailing-space: 24px}.icon-btn.icon-btn-md:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn.icon-btn-lg{--container-height: 96px;--icon-size: 32px;--leading-space: 32px;--outline-width: 2px;--trailing-space: 32px}.icon-btn.icon-btn-lg:where(.icon-btn-narrow){--leading-space: 16px;--trailing-space: 16px}.icon-btn.icon-btn-lg:where(.icon-btn-wide){--leading-space: 48px;--trailing-space: 48px}.icon-btn.icon-btn-lg:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-xl{--container-height: 136px;--icon-size: 40px;--leading-space: 48px;--outline-width: 3px;--trailing-space: 48px}.icon-btn.icon-btn-xl:where(.icon-btn-narrow){--leading-space: 32px;--trailing-space: 32px}.icon-btn.icon-btn-xl:where(.icon-btn-wide){--leading-space: 72px;--trailing-space: 72px}.icon-btn.icon-btn-xl:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square{--container-shape: var(--md-sys-shape-corner-md)}.icon-btn.icon-btn-square:where(.icon-btn-md){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn.icon-btn-square:where(.icon-btn-lg){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square:where(.icon-btn-xl){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: calc(var(--container-height) / 2)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-sm)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-md){--container-shape: var(--md-sys-shape-corner-md)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-lg){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-xl){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn:is(:disabled,.disabled){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.icon-btn{display:inline-grid;place-items:center;background-color:var(--container-color);border:var(--outline-width) solid var(--outline-color);border-radius:var(--container-shape);height:var(--container-height);color:var(--icon-color);transition:border-radius 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9),var(--ripple-transition);--md-icon-color: var(--icon-color);--md-icon-size: var(--icon-size)}.icon-btn:not(.icon-btn-narrow,.icon-btn-wide){aspect-ratio:1}.icon-btn:is(.icon-btn-narrow,.icon-btn-wide){padding-inline:var(--leading-space) var(--trailing-space)}.icon-btn:not(:disabled,.disabled){cursor:pointer}}
 `;
 export default styles.styleSheet;
 //# sourceMappingURL=icon-button.cssresult.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button.cssresult.js","sourceRoot":"","sources":["icon-button.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,4EAA4E;AAC5E,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/iconbutton/icon-button.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;@layer md.comp.icon-btn{.icon-btn{--container-color: transparent;--container-height: auto;--container-shape: calc(var(--container-height) / 2);--icon-color: currentColor;--icon-size: 24px;--leading-space: 0;--md-icon-fill: 1;--outline-color: transparent;--outline-width: 0;--trailing-space: 0}.icon-btn:where(.icon-btn-unselected,[aria-pressed=false]){--md-icon-fill: 0}.icon-btn:is(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-md);--icon-color: var(--md-sys-color-primary);--md-icon-fill: 1}.icon-btn.icon-btn-filled{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.icon-btn.icon-btn-filled:where(.icon-btn-unselected,[aria-pressed=false]){--container-color: var(--md-sys-color-surface-container);--icon-color: var(--md-sys-color-on-surface-variant)}.icon-btn.icon-btn-filled:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.icon-btn.icon-btn-tonal{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container)}.icon-btn.icon-btn-tonal:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary)}.icon-btn.icon-btn-outlined{--icon-color: var(--md-sys-color-on-surface-variant);--outline-color: var(--md-sys-color-outline-variant)}.icon-btn.icon-btn-outlined:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-inverse-surface);--icon-color: var(--md-sys-color-inverse-on-surface)}.icon-btn.icon-btn-standard{--icon-color: var(--md-sys-color-on-surface-variant)}.icon-btn.icon-btn-standard:where(.icon-btn-selected,[aria-pressed=true]){--icon-color: var(--md-sys-color-primary)}.icon-btn.icon-btn-xs{--container-height: 32px;--icon-size: 20px;--leading-space: 6px;--outline-width: 1px;--trailing-space: 6px}.icon-btn.icon-btn-xs:where(.icon-btn-narrow){--leading-space: 4px;--trailing-space: 4px}.icon-btn.icon-btn-xs:where(.icon-btn-wide){--leading-space: 10px;--trailing-space: 10px}.icon-btn.icon-btn-sm{--container-height: 40px;--leading-space: 8px;--outline-width: 1px;--trailing-space: 8px}.icon-btn.icon-btn-sm:where(.icon-btn-narrow){--leading-space: 4px;--trailing-space: 4px}.icon-btn.icon-btn-sm:where(.icon-btn-wide){--leading-space: 14px;--trailing-space: 14px}.icon-btn.icon-btn-md{--container-height: 56px;--leading-space: 16px;--outline-width: 1px;--trailing-space: 16px}.icon-btn.icon-btn-md:where(.icon-btn-narrow){--leading-space: 12px;--trailing-space: 12px}.icon-btn.icon-btn-md:where(.icon-btn-wide){--leading-space: 24px;--trailing-space: 24px}.icon-btn.icon-btn-md:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn.icon-btn-lg{--container-height: 96px;--icon-size: 32px;--leading-space: 32px;--outline-width: 2px;--trailing-space: 32px}.icon-btn.icon-btn-lg:where(.icon-btn-narrow){--leading-space: 16px;--trailing-space: 16px}.icon-btn.icon-btn-lg:where(.icon-btn-wide){--leading-space: 48px;--trailing-space: 48px}.icon-btn.icon-btn-lg:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-xl{--container-height: 136px;--icon-size: 40px;--leading-space: 48px;--outline-width: 3px;--trailing-space: 48px}.icon-btn.icon-btn-xl:where(.icon-btn-narrow){--leading-space: 32px;--trailing-space: 32px}.icon-btn.icon-btn-xl:where(.icon-btn-wide){--leading-space: 72px;--trailing-space: 72px}.icon-btn.icon-btn-xl:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square{--container-shape: var(--md-sys-shape-corner-md)}.icon-btn.icon-btn-square:where(.icon-btn-md){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn.icon-btn-square:where(.icon-btn-lg){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square:where(.icon-btn-xl){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: calc(var(--container-height) / 2)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-sm)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-md){--container-shape: var(--md-sys-shape-corner-md)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-lg){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-xl){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn:is(:disabled,.disabled){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.icon-btn{display:inline-grid;place-items:center;background-color:var(--container-color);border:var(--outline-width) solid var(--outline-color);border-radius:var(--container-shape);height:var(--container-height);color:var(--icon-color);transition:border-radius 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9),var(--ripple-transition);--md-icon-size: var(--icon-size)}.icon-btn:not(.icon-btn-narrow,.icon-btn-wide){aspect-ratio:1}.icon-btn:is(.icon-btn-narrow,.icon-btn-wide){padding-inline:var(--leading-space) var(--trailing-space)}.icon-btn:not(:disabled,.disabled){cursor:pointer}}\n`;\nexport default styles.styleSheet!;\n"]}
+{"version":3,"file":"icon-button.cssresult.js","sourceRoot":"","sources":["icon-button.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,4EAA4E;AAC5E,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/iconbutton/icon-button.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;@layer md.comp.icon-btn{.icon-btn{--container-color: transparent;--container-height: auto;--container-shape: calc(var(--container-height) / 2);--icon-color: currentColor;--icon-size: 24px;--leading-space: 0;--md-icon-fill: 1;--outline-color: transparent;--outline-width: 0;--trailing-space: 0}.icon-btn:where(.icon-btn-unselected,[aria-pressed=false]){--md-icon-fill: 0}.icon-btn:is(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-md);--icon-color: var(--md-sys-color-primary);--md-icon-fill: 1}.icon-btn.icon-btn-filled{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.icon-btn.icon-btn-filled:where(.icon-btn-unselected,[aria-pressed=false]){--container-color: var(--md-sys-color-surface-container);--icon-color: var(--md-sys-color-on-surface-variant)}.icon-btn.icon-btn-filled:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.icon-btn.icon-btn-tonal{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container)}.icon-btn.icon-btn-tonal:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary)}.icon-btn.icon-btn-outlined{--icon-color: var(--md-sys-color-on-surface-variant);--outline-color: var(--md-sys-color-outline-variant)}.icon-btn.icon-btn-outlined:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-inverse-surface);--icon-color: var(--md-sys-color-inverse-on-surface)}.icon-btn.icon-btn-standard{--icon-color: var(--md-sys-color-on-surface-variant)}.icon-btn.icon-btn-standard:where(.icon-btn-selected,[aria-pressed=true]){--icon-color: var(--md-sys-color-primary)}.icon-btn.icon-btn-xs{--container-height: 32px;--icon-size: 20px;--leading-space: 6px;--outline-width: 1px;--trailing-space: 6px}.icon-btn.icon-btn-xs:where(.icon-btn-narrow){--leading-space: 4px;--trailing-space: 4px}.icon-btn.icon-btn-xs:where(.icon-btn-wide){--leading-space: 10px;--trailing-space: 10px}.icon-btn.icon-btn-sm{--container-height: 40px;--leading-space: 8px;--outline-width: 1px;--trailing-space: 8px}.icon-btn.icon-btn-sm:where(.icon-btn-narrow){--leading-space: 4px;--trailing-space: 4px}.icon-btn.icon-btn-sm:where(.icon-btn-wide){--leading-space: 14px;--trailing-space: 14px}.icon-btn.icon-btn-md{--container-height: 56px;--leading-space: 16px;--outline-width: 1px;--trailing-space: 16px}.icon-btn.icon-btn-md:where(.icon-btn-narrow){--leading-space: 12px;--trailing-space: 12px}.icon-btn.icon-btn-md:where(.icon-btn-wide){--leading-space: 24px;--trailing-space: 24px}.icon-btn.icon-btn-md:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn.icon-btn-lg{--container-height: 96px;--icon-size: 32px;--leading-space: 32px;--outline-width: 2px;--trailing-space: 32px}.icon-btn.icon-btn-lg:where(.icon-btn-narrow){--leading-space: 16px;--trailing-space: 16px}.icon-btn.icon-btn-lg:where(.icon-btn-wide){--leading-space: 48px;--trailing-space: 48px}.icon-btn.icon-btn-lg:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-xl{--container-height: 136px;--icon-size: 40px;--leading-space: 48px;--outline-width: 3px;--trailing-space: 48px}.icon-btn.icon-btn-xl:where(.icon-btn-narrow){--leading-space: 32px;--trailing-space: 32px}.icon-btn.icon-btn-xl:where(.icon-btn-wide){--leading-space: 72px;--trailing-space: 72px}.icon-btn.icon-btn-xl:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square{--container-shape: var(--md-sys-shape-corner-md)}.icon-btn.icon-btn-square:where(.icon-btn-md){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn.icon-btn-square:where(.icon-btn-lg){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square:where(.icon-btn-xl){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: calc(var(--container-height) / 2)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-sm)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-md){--container-shape: var(--md-sys-shape-corner-md)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-lg){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-xl){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn:is(:disabled,.disabled){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.icon-btn{display:inline-grid;place-items:center;background-color:var(--container-color);border:var(--outline-width) solid var(--outline-color);border-radius:var(--container-shape);height:var(--container-height);color:var(--icon-color);transition:border-radius 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9),var(--ripple-transition);--md-icon-color: var(--icon-color);--md-icon-size: var(--icon-size)}.icon-btn:not(.icon-btn-narrow,.icon-btn-wide){aspect-ratio:1}.icon-btn:is(.icon-btn-narrow,.icon-btn-wide){padding-inline:var(--leading-space) var(--trailing-space)}.icon-btn:not(:disabled,.disabled){cursor:pointer}}\n`;\nexport default styles.styleSheet!;\n"]}

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

@@ -142,6 +142,7 @@
       transition:
         border-radius 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9),
         var(--ripple-transition);
+      --md-icon-color: var(--icon-color);
       --md-icon-size: var(--icon-size);
     }
 

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

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

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

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

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

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

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

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

@@ -108,6 +108,7 @@
       font: var(--label-text);
       letter-spacing: var(--label-text-tracking);
       font-variation-settings: var(--label-text-axes);
+      -webkit-font-smoothing: antialiased;
       appearance: none;
       border: none;
       text-align: unset;

package/labs/gb/components/menu/menu.css

@@ -1,4 +1,4 @@
 /*!
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.divider;@layer md.comp.menu{.menu{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-2);--container-shape: var(--md-sys-shape-corner-lg);--gap: 2px;--group-padding: 2px;--group-shape: var(--md-sys-shape-corner-sm);--section-label-text-color: var(--md-sys-color-on-surface-variant)}.menu.menu-vibrant{--container-color: var(--md-sys-color-tertiary-container);--menu-vibrant: true}.menu{flex-direction:column;box-shadow:var(--container-elevation);border-radius:var(--container-shape);background-color:var(--container-color);padding-block:var(--group-padding)}.menu:popover-open,.menu.menu-host{display:flex}.menu:popover-open,:host(:popover-open):has(.menu.menu-host){position-area:end span-end;border:none}:host(:popover-open):has(.menu.menu-host){overflow:visible;background:none;padding:0}.menu.menu-host{overflow:auto}.menu .divider,.menu ::slotted(.divider){margin:8px 16px}.menu-item{--between-space: 12px;--bottom-space: 8px;--container-color: transparent;--height: 44px;--inner-corner-corner-size: none;--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-label-lg);--label-text-axes: var(--md-sys-typescale-label-lg-axes);--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--leading-space: 16px;--shape: var(--md-sys-shape-corner-xs);--supporting-text-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-sm);--supporting-text-axes: var(--md-sys-typescale-body-sm-axes);--supporting-text-tracking: var(--md-sys-typescale-body-sm-tracking);--top-space: 8px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--trailing-space: 16px;--trailing-supporting-text: var(--md-sys-typescale-label-lg);--trailing-supporting-text-axes: var(--md-sys-typescale-label-lg-axes);--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-lg-tracking )}.menu-item:first-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}.menu-item:last-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}@container style(--menu-vibrant: true){.menu-item{--label-text-color: var(--md-sys-color-on-tertiary-container);--leading-icon-color: var(--md-sys-color-on-tertiary-container);--supporting-text-color: var(--md-sys-color-on-tertiary-container);--trailing-icon-color: var(--md-sys-color-on-tertiary-container);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container)}.menu-item:where(:hover,.hover){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:focus-within,.focus){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:active,.active){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}}.menu-item:is(:checked,.checked){--container-color: var(--md-sys-color-tertiary-container);--label-text-color: var(--md-sys-color-on-tertiary-container);--leading-icon-color: var(--md-sys-color-on-tertiary-container);--shape: var(--md-sys-shape-corner-md);--supporting-text-color: var(--md-sys-color-on-tertiary-container);--trailing-icon-color: var(--md-sys-color-on-tertiary-container);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container)}@container style(--menu-vibrant: true){.menu-item:is(:checked,.checked){--container-color: var(--md-sys-color-tertiary);--label-text-color: var(--md-sys-color-on-tertiary);--leading-icon-color: var(--md-sys-color-on-tertiary);--supporting-text-color: var(--md-sys-color-on-tertiary);--trailing-icon-color: var(--md-sys-color-on-tertiary);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary)}}.menu-item:is(:disabled,.disabled){--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%);--supporting-text-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%);--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% )}@container style(--menu-vibrant: true){.menu-item:is(:disabled,.disabled){--label-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--leading-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% )}}.menu-item:is(:disabled,.disabled):where(:checked,.checked){--container-color: hsl( from var(--md-sys-color-tertiary-container) h s l / 38% );--label-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--leading-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% )}.menu-item{position:relative;isolation:isolate;display:flex;align-items:center;user-select:none;box-sizing:border-box;gap:var(--between-space);min-height:calc(var(--height) + 4px);border-radius:var(--shape);padding-block:var(--top-space) var(--bottom-space);padding-inline:var(--leading-space) var(--trailing-space);background-image:none;outline:none;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes)}.menu-item::before{display:flex;content:"";position:absolute;inset:2px 4px;z-index:-1;border-radius:inherit;background-color:var(--container-color);background-image:var(--ripple);animation:var(--ripple-animation),var(--focus-ring-animation);transition:var(--ripple-transition);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset)}.menu-item:not(:disabled,.disabled){cursor:pointer}.menu-item .menu-item-content{display:flex;flex-direction:column;flex:1}.menu-item .menu-item-supporting-text{color:var(--supporting-text-color);font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);font-variation-settings:var(--supporting-text-axes)}.menu-item .menu-item-trailing-text{color:var(--trailing-supporting-text-color);font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);font-variation-settings:var(--trailing-supporting-text-axes)}.menu-item .menu-item-leading,.menu-item .menu-item-trailing{display:flex;align-items:center;gap:8px}.menu-item .menu-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.menu-item .menu-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}}/*# sourceMappingURL=menu.css.map */
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.divider;@layer md.comp.menu{.menu{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-2);--container-shape: var(--md-sys-shape-corner-lg);--gap: 2px;--group-padding: 2px;--group-shape: var(--md-sys-shape-corner-sm);--section-label-text-color: var(--md-sys-color-on-surface-variant)}.menu.menu-vibrant{--container-color: var(--md-sys-color-tertiary-container);--menu-vibrant: true}.menu{flex-direction:column;box-shadow:var(--container-elevation);border-radius:var(--container-shape);background-color:var(--container-color);padding-block:var(--group-padding)}.menu:popover-open,.menu.menu-host{display:flex}.menu:popover-open,:host(:popover-open):has(.menu.menu-host){position-area:end span-end;border:none}:host(:popover-open):has(.menu.menu-host){overflow:visible;background:none;padding:0}.menu.menu-host{overflow:auto}.menu .divider,.menu ::slotted(.divider){margin:8px 16px}.menu-item{--between-space: 12px;--bottom-space: 8px;--container-color: transparent;--height: 44px;--inner-corner-corner-size: none;--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-label-lg);--label-text-axes: var(--md-sys-typescale-label-lg-axes);--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--leading-space: 16px;--shape: var(--md-sys-shape-corner-xs);--supporting-text-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-sm);--supporting-text-axes: var(--md-sys-typescale-body-sm-axes);--supporting-text-tracking: var(--md-sys-typescale-body-sm-tracking);--top-space: 8px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--trailing-space: 16px;--trailing-supporting-text: var(--md-sys-typescale-label-lg);--trailing-supporting-text-axes: var(--md-sys-typescale-label-lg-axes);--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-lg-tracking )}.menu-item:first-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}.menu-item:last-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}@container style(--menu-vibrant: true){.menu-item{--label-text-color: var(--md-sys-color-on-tertiary-container);--leading-icon-color: var(--md-sys-color-on-tertiary-container);--supporting-text-color: var(--md-sys-color-on-tertiary-container);--trailing-icon-color: var(--md-sys-color-on-tertiary-container);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container)}.menu-item:where(:hover,.hover){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:focus-within,.focus){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:active,.active){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}}.menu-item:is(:checked,.checked){--container-color: var(--md-sys-color-tertiary-container);--label-text-color: var(--md-sys-color-on-tertiary-container);--leading-icon-color: var(--md-sys-color-on-tertiary-container);--shape: var(--md-sys-shape-corner-md);--supporting-text-color: var(--md-sys-color-on-tertiary-container);--trailing-icon-color: var(--md-sys-color-on-tertiary-container);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container)}@container style(--menu-vibrant: true){.menu-item:is(:checked,.checked){--container-color: var(--md-sys-color-tertiary);--label-text-color: var(--md-sys-color-on-tertiary);--leading-icon-color: var(--md-sys-color-on-tertiary);--supporting-text-color: var(--md-sys-color-on-tertiary);--trailing-icon-color: var(--md-sys-color-on-tertiary);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary)}}.menu-item:is(:disabled,.disabled){--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%);--supporting-text-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%);--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% )}@container style(--menu-vibrant: true){.menu-item:is(:disabled,.disabled){--label-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--leading-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% )}}.menu-item:is(:disabled,.disabled):where(:checked,.checked){--container-color: hsl( from var(--md-sys-color-tertiary-container) h s l / 38% );--label-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--leading-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% )}.menu-item{position:relative;isolation:isolate;display:flex;align-items:center;user-select:none;box-sizing:border-box;gap:var(--between-space);min-height:calc(var(--height) + 4px);border-radius:var(--shape);padding-block:var(--top-space) var(--bottom-space);padding-inline:var(--leading-space) var(--trailing-space);background-image:none;outline:none;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes);-webkit-font-smoothing:antialiased}.menu-item::before{display:flex;content:"";position:absolute;inset:2px 4px;z-index:-1;border-radius:inherit;background-color:var(--container-color);background-image:var(--ripple);animation:var(--ripple-animation),var(--focus-ring-animation);transition:var(--ripple-transition);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset)}.menu-item:not(:disabled,.disabled){cursor:pointer}.menu-item .menu-item-content{display:flex;flex-direction:column;flex:1}.menu-item .menu-item-supporting-text{color:var(--supporting-text-color);font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);font-variation-settings:var(--supporting-text-axes)}.menu-item .menu-item-trailing-text{color:var(--trailing-supporting-text-color);font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);font-variation-settings:var(--trailing-supporting-text-axes)}.menu-item .menu-item-leading,.menu-item .menu-item-trailing{display:flex;align-items:center;gap:8px}.menu-item .menu-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.menu-item .menu-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}}/*# sourceMappingURL=menu.css.map */

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["menu.scss","_menu-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,mEACA,oBAEI,MCLF,6DACA,wDACA,iDACA,WACA,qBACA,6CACA,mEDEE,mBCWF,0DDTI,qBAGF,MACE,sBACA,sCACA,qCACA,wCACA,mCAGF,mCAEE,aAGF,6DAEE,2BACA,YAGF,0CACE,iBACA,gBACA,UAGF,gBACE,cAGF,yCAEE,gBAKF,WCzBF,sBACA,oBACA,+BACA,eACA,iCACA,mDACA,+CACA,yDACA,iEACA,6DACA,0BACA,sBACA,uCACA,gEACA,mDACA,6DACA,qEACA,iBACA,8DACA,2BACA,uBACA,6DACA,uEACA,yEACA,iFDIE,uBCGF,0DACA,uCDDE,sBCKF,0DACA,uCDHE,uCACE,WCMJ,8DACA,gEACA,mEACA,iEACA,4EDPI,gCCWJ,mDACA,oDDTI,uCCaJ,mDACA,oDDXI,kCCeJ,mDACA,qDDXE,iCCeF,0DACA,8DACA,gEACA,uCACA,mEACA,iEACA,4EDnBI,uCAFF,iCCyBF,gDACA,oDACA,sDACA,yDACA,uDACA,mEDvBE,mCC2BF,yEACA,2EACA,8EACA,4EACA,yFD7BI,uCAFF,mCCqCF,sFAGA,wFAGA,2FAGA,yFAGA,qGD5CI,4DCkDJ,kFAGA,sFAGA,wFAGA,2FAGA,yFAGA,oGD5DE,WACE,kBACA,kBACA,aACA,mBACA,iBACA,sBACA,yBACA,qCACA,2BACA,mDACA,0DACA,sBACA,aACA,8BACA,uBACA,0CACA,+CAGF,mBACE,aACA,WACA,kBACA,cACA,WACA,sBACA,wCACA,+BACA,8DACA,oCACA,kCACA,wCAGF,oCACE,eAGF,8BACE,aACA,sBACA,OAGF,sCACE,mCACA,4BACA,+CACA,oDAGF,oCACE,4CACA,qCACA,wDACA,6DAGF,6DAEE,aACA,mBACA,QAGF,8BACE,2CACA,yCAGF,+BACE,4CACA","file":"menu.css"}
+{"version":3,"sourceRoot":"","sources":["menu.scss","_menu-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,mEACA,oBAEI,MCLF,6DACA,wDACA,iDACA,WACA,qBACA,6CACA,mEDEE,mBCWF,0DDTI,qBAGF,MACE,sBACA,sCACA,qCACA,wCACA,mCAGF,mCAEE,aAGF,6DAEE,2BACA,YAGF,0CACE,iBACA,gBACA,UAGF,gBACE,cAGF,yCAEE,gBAKF,WCzBF,sBACA,oBACA,+BACA,eACA,iCACA,mDACA,+CACA,yDACA,iEACA,6DACA,0BACA,sBACA,uCACA,gEACA,mDACA,6DACA,qEACA,iBACA,8DACA,2BACA,uBACA,6DACA,uEACA,yEACA,iFDIE,uBCGF,0DACA,uCDDE,sBCKF,0DACA,uCDHE,uCACE,WCMJ,8DACA,gEACA,mEACA,iEACA,4EDPI,gCCWJ,mDACA,oDDTI,uCCaJ,mDACA,oDDXI,kCCeJ,mDACA,qDDXE,iCCeF,0DACA,8DACA,gEACA,uCACA,mEACA,iEACA,4EDnBI,uCAFF,iCCyBF,gDACA,oDACA,sDACA,yDACA,uDACA,mEDvBE,mCC2BF,yEACA,2EACA,8EACA,4EACA,yFD7BI,uCAFF,mCCqCF,sFAGA,wFAGA,2FAGA,yFAGA,qGD5CI,4DCkDJ,kFAGA,sFAGA,wFAGA,2FAGA,yFAGA,oGD5DE,WACE,kBACA,kBACA,aACA,mBACA,iBACA,sBACA,yBACA,qCACA,2BACA,mDACA,0DACA,sBACA,aACA,8BACA,uBACA,0CACA,+CACA,mCAGF,mBACE,aACA,WACA,kBACA,cACA,WACA,sBACA,wCACA,+BACA,8DACA,oCACA,kCACA,wCAGF,oCACE,eAGF,8BACE,aACA,sBACA,OAGF,sCACE,mCACA,4BACA,+CACA,oDAGF,oCACE,4CACA,qCACA,wDACA,6DAGF,6DAEE,aACA,mBACA,QAGF,8BACE,2CACA,yCAGF,+BACE,4CACA","file":"menu.css"}

package/labs/gb/components/menu/menu.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.ripple, md.comp.focus-ring, md.comp.divider;@layer md.comp.menu{.menu{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-2);--container-shape: var(--md-sys-shape-corner-lg);--gap: 2px;--group-padding: 2px;--group-shape: var(--md-sys-shape-corner-sm);--section-label-text-color: var(--md-sys-color-on-surface-variant)}.menu.menu-vibrant{--container-color: var(--md-sys-color-tertiary-container);--menu-vibrant: true}.menu{flex-direction:column;box-shadow:var(--container-elevation);border-radius:var(--container-shape);background-color:var(--container-color);padding-block:var(--group-padding)}.menu:popover-open,.menu.menu-host{display:flex}.menu:popover-open,:host(:popover-open):has(.menu.menu-host){position-area:end span-end;border:none}:host(:popover-open):has(.menu.menu-host){overflow:visible;background:none;padding:0}.menu.menu-host{overflow:auto}.menu .divider,.menu ::slotted(.divider){margin:8px 16px}.menu-item{--between-space: 12px;--bottom-space: 8px;--container-color: transparent;--height: 44px;--inner-corner-corner-size: none;--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-label-lg);--label-text-axes: var(--md-sys-typescale-label-lg-axes);--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--leading-space: 16px;--shape: var(--md-sys-shape-corner-xs);--supporting-text-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-sm);--supporting-text-axes: var(--md-sys-typescale-body-sm-axes);--supporting-text-tracking: var(--md-sys-typescale-body-sm-tracking);--top-space: 8px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--trailing-space: 16px;--trailing-supporting-text: var(--md-sys-typescale-label-lg);--trailing-supporting-text-axes: var(--md-sys-typescale-label-lg-axes);--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-lg-tracking )}.menu-item:first-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}.menu-item:last-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}@container style(--menu-vibrant: true){.menu-item{--label-text-color: var(--md-sys-color-on-tertiary-container);--leading-icon-color: var(--md-sys-color-on-tertiary-container);--supporting-text-color: var(--md-sys-color-on-tertiary-container);--trailing-icon-color: var(--md-sys-color-on-tertiary-container);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container)}.menu-item:where(:hover,.hover){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:focus-within,.focus){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:active,.active){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}}.menu-item:is(:checked,.checked){--container-color: var(--md-sys-color-tertiary-container);--label-text-color: var(--md-sys-color-on-tertiary-container);--leading-icon-color: var(--md-sys-color-on-tertiary-container);--shape: var(--md-sys-shape-corner-md);--supporting-text-color: var(--md-sys-color-on-tertiary-container);--trailing-icon-color: var(--md-sys-color-on-tertiary-container);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container)}@container style(--menu-vibrant: true){.menu-item:is(:checked,.checked){--container-color: var(--md-sys-color-tertiary);--label-text-color: var(--md-sys-color-on-tertiary);--leading-icon-color: var(--md-sys-color-on-tertiary);--supporting-text-color: var(--md-sys-color-on-tertiary);--trailing-icon-color: var(--md-sys-color-on-tertiary);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary)}}.menu-item:is(:disabled,.disabled){--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%);--supporting-text-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%);--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% )}@container style(--menu-vibrant: true){.menu-item:is(:disabled,.disabled){--label-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--leading-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% )}}.menu-item:is(:disabled,.disabled):where(:checked,.checked){--container-color: hsl( from var(--md-sys-color-tertiary-container) h s l / 38% );--label-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--leading-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% )}.menu-item{position:relative;isolation:isolate;display:flex;align-items:center;user-select:none;box-sizing:border-box;gap:var(--between-space);min-height:calc(var(--height) + 4px);border-radius:var(--shape);padding-block:var(--top-space) var(--bottom-space);padding-inline:var(--leading-space) var(--trailing-space);background-image:none;outline:none;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes)}.menu-item::before{display:flex;content:"";position:absolute;inset:2px 4px;z-index:-1;border-radius:inherit;background-color:var(--container-color);background-image:var(--ripple);animation:var(--ripple-animation),var(--focus-ring-animation);transition:var(--ripple-transition);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset)}.menu-item:not(:disabled,.disabled){cursor:pointer}.menu-item .menu-item-content{display:flex;flex-direction:column;flex:1}.menu-item .menu-item-supporting-text{color:var(--supporting-text-color);font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);font-variation-settings:var(--supporting-text-axes)}.menu-item .menu-item-trailing-text{color:var(--trailing-supporting-text-color);font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);font-variation-settings:var(--trailing-supporting-text-axes)}.menu-item .menu-item-leading,.menu-item .menu-item-trailing{display:flex;align-items:center;gap:8px}.menu-item .menu-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.menu-item .menu-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}}
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.divider;@layer md.comp.menu{.menu{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-2);--container-shape: var(--md-sys-shape-corner-lg);--gap: 2px;--group-padding: 2px;--group-shape: var(--md-sys-shape-corner-sm);--section-label-text-color: var(--md-sys-color-on-surface-variant)}.menu.menu-vibrant{--container-color: var(--md-sys-color-tertiary-container);--menu-vibrant: true}.menu{flex-direction:column;box-shadow:var(--container-elevation);border-radius:var(--container-shape);background-color:var(--container-color);padding-block:var(--group-padding)}.menu:popover-open,.menu.menu-host{display:flex}.menu:popover-open,:host(:popover-open):has(.menu.menu-host){position-area:end span-end;border:none}:host(:popover-open):has(.menu.menu-host){overflow:visible;background:none;padding:0}.menu.menu-host{overflow:auto}.menu .divider,.menu ::slotted(.divider){margin:8px 16px}.menu-item{--between-space: 12px;--bottom-space: 8px;--container-color: transparent;--height: 44px;--inner-corner-corner-size: none;--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-label-lg);--label-text-axes: var(--md-sys-typescale-label-lg-axes);--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--leading-space: 16px;--shape: var(--md-sys-shape-corner-xs);--supporting-text-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-sm);--supporting-text-axes: var(--md-sys-typescale-body-sm-axes);--supporting-text-tracking: var(--md-sys-typescale-body-sm-tracking);--top-space: 8px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--trailing-space: 16px;--trailing-supporting-text: var(--md-sys-typescale-label-lg);--trailing-supporting-text-axes: var(--md-sys-typescale-label-lg-axes);--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-lg-tracking )}.menu-item:first-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}.menu-item:last-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}@container style(--menu-vibrant: true){.menu-item{--label-text-color: var(--md-sys-color-on-tertiary-container);--leading-icon-color: var(--md-sys-color-on-tertiary-container);--supporting-text-color: var(--md-sys-color-on-tertiary-container);--trailing-icon-color: var(--md-sys-color-on-tertiary-container);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container)}.menu-item:where(:hover,.hover){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:focus-within,.focus){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:active,.active){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}}.menu-item:is(:checked,.checked){--container-color: var(--md-sys-color-tertiary-container);--label-text-color: var(--md-sys-color-on-tertiary-container);--leading-icon-color: var(--md-sys-color-on-tertiary-container);--shape: var(--md-sys-shape-corner-md);--supporting-text-color: var(--md-sys-color-on-tertiary-container);--trailing-icon-color: var(--md-sys-color-on-tertiary-container);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container)}@container style(--menu-vibrant: true){.menu-item:is(:checked,.checked){--container-color: var(--md-sys-color-tertiary);--label-text-color: var(--md-sys-color-on-tertiary);--leading-icon-color: var(--md-sys-color-on-tertiary);--supporting-text-color: var(--md-sys-color-on-tertiary);--trailing-icon-color: var(--md-sys-color-on-tertiary);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary)}}.menu-item:is(:disabled,.disabled){--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%);--supporting-text-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%);--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% )}@container style(--menu-vibrant: true){.menu-item:is(:disabled,.disabled){--label-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--leading-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% )}}.menu-item:is(:disabled,.disabled):where(:checked,.checked){--container-color: hsl( from var(--md-sys-color-tertiary-container) h s l / 38% );--label-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--leading-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% )}.menu-item{position:relative;isolation:isolate;display:flex;align-items:center;user-select:none;box-sizing:border-box;gap:var(--between-space);min-height:calc(var(--height) + 4px);border-radius:var(--shape);padding-block:var(--top-space) var(--bottom-space);padding-inline:var(--leading-space) var(--trailing-space);background-image:none;outline:none;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes);-webkit-font-smoothing:antialiased}.menu-item::before{display:flex;content:"";position:absolute;inset:2px 4px;z-index:-1;border-radius:inherit;background-color:var(--container-color);background-image:var(--ripple);animation:var(--ripple-animation),var(--focus-ring-animation);transition:var(--ripple-transition);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset)}.menu-item:not(:disabled,.disabled){cursor:pointer}.menu-item .menu-item-content{display:flex;flex-direction:column;flex:1}.menu-item .menu-item-supporting-text{color:var(--supporting-text-color);font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);font-variation-settings:var(--supporting-text-axes)}.menu-item .menu-item-trailing-text{color:var(--trailing-supporting-text-color);font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);font-variation-settings:var(--trailing-supporting-text-axes)}.menu-item .menu-item-leading,.menu-item .menu-item-trailing{display:flex;align-items:center;gap:8px}.menu-item .menu-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.menu-item .menu-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}}
 `;
 export default styles.styleSheet;
 //# sourceMappingURL=menu.cssresult.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu.cssresult.js","sourceRoot":"","sources":["menu.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/menu/menu.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.divider;@layer md.comp.menu{.menu{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-2);--container-shape: var(--md-sys-shape-corner-lg);--gap: 2px;--group-padding: 2px;--group-shape: var(--md-sys-shape-corner-sm);--section-label-text-color: var(--md-sys-color-on-surface-variant)}.menu.menu-vibrant{--container-color: var(--md-sys-color-tertiary-container);--menu-vibrant: true}.menu{flex-direction:column;box-shadow:var(--container-elevation);border-radius:var(--container-shape);background-color:var(--container-color);padding-block:var(--group-padding)}.menu:popover-open,.menu.menu-host{display:flex}.menu:popover-open,:host(:popover-open):has(.menu.menu-host){position-area:end span-end;border:none}:host(:popover-open):has(.menu.menu-host){overflow:visible;background:none;padding:0}.menu.menu-host{overflow:auto}.menu .divider,.menu ::slotted(.divider){margin:8px 16px}.menu-item{--between-space: 12px;--bottom-space: 8px;--container-color: transparent;--height: 44px;--inner-corner-corner-size: none;--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-label-lg);--label-text-axes: var(--md-sys-typescale-label-lg-axes);--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--leading-space: 16px;--shape: var(--md-sys-shape-corner-xs);--supporting-text-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-sm);--supporting-text-axes: var(--md-sys-typescale-body-sm-axes);--supporting-text-tracking: var(--md-sys-typescale-body-sm-tracking);--top-space: 8px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--trailing-space: 16px;--trailing-supporting-text: var(--md-sys-typescale-label-lg);--trailing-supporting-text-axes: var(--md-sys-typescale-label-lg-axes);--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-lg-tracking )}.menu-item:first-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}.menu-item:last-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}@container style(--menu-vibrant: true){.menu-item{--label-text-color: var(--md-sys-color-on-tertiary-container);--leading-icon-color: var(--md-sys-color-on-tertiary-container);--supporting-text-color: var(--md-sys-color-on-tertiary-container);--trailing-icon-color: var(--md-sys-color-on-tertiary-container);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container)}.menu-item:where(:hover,.hover){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:focus-within,.focus){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:active,.active){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}}.menu-item:is(:checked,.checked){--container-color: var(--md-sys-color-tertiary-container);--label-text-color: var(--md-sys-color-on-tertiary-container);--leading-icon-color: var(--md-sys-color-on-tertiary-container);--shape: var(--md-sys-shape-corner-md);--supporting-text-color: var(--md-sys-color-on-tertiary-container);--trailing-icon-color: var(--md-sys-color-on-tertiary-container);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container)}@container style(--menu-vibrant: true){.menu-item:is(:checked,.checked){--container-color: var(--md-sys-color-tertiary);--label-text-color: var(--md-sys-color-on-tertiary);--leading-icon-color: var(--md-sys-color-on-tertiary);--supporting-text-color: var(--md-sys-color-on-tertiary);--trailing-icon-color: var(--md-sys-color-on-tertiary);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary)}}.menu-item:is(:disabled,.disabled){--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%);--supporting-text-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%);--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% )}@container style(--menu-vibrant: true){.menu-item:is(:disabled,.disabled){--label-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--leading-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% )}}.menu-item:is(:disabled,.disabled):where(:checked,.checked){--container-color: hsl( from var(--md-sys-color-tertiary-container) h s l / 38% );--label-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--leading-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% )}.menu-item{position:relative;isolation:isolate;display:flex;align-items:center;user-select:none;box-sizing:border-box;gap:var(--between-space);min-height:calc(var(--height) + 4px);border-radius:var(--shape);padding-block:var(--top-space) var(--bottom-space);padding-inline:var(--leading-space) var(--trailing-space);background-image:none;outline:none;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes)}.menu-item::before{display:flex;content:\"\";position:absolute;inset:2px 4px;z-index:-1;border-radius:inherit;background-color:var(--container-color);background-image:var(--ripple);animation:var(--ripple-animation),var(--focus-ring-animation);transition:var(--ripple-transition);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset)}.menu-item:not(:disabled,.disabled){cursor:pointer}.menu-item .menu-item-content{display:flex;flex-direction:column;flex:1}.menu-item .menu-item-supporting-text{color:var(--supporting-text-color);font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);font-variation-settings:var(--supporting-text-axes)}.menu-item .menu-item-trailing-text{color:var(--trailing-supporting-text-color);font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);font-variation-settings:var(--trailing-supporting-text-axes)}.menu-item .menu-item-leading,.menu-item .menu-item-trailing{display:flex;align-items:center;gap:8px}.menu-item .menu-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.menu-item .menu-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}}\n`;\nexport default styles.styleSheet!;\n"]}
+{"version":3,"file":"menu.cssresult.js","sourceRoot":"","sources":["menu.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/menu/menu.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.divider;@layer md.comp.menu{.menu{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-2);--container-shape: var(--md-sys-shape-corner-lg);--gap: 2px;--group-padding: 2px;--group-shape: var(--md-sys-shape-corner-sm);--section-label-text-color: var(--md-sys-color-on-surface-variant)}.menu.menu-vibrant{--container-color: var(--md-sys-color-tertiary-container);--menu-vibrant: true}.menu{flex-direction:column;box-shadow:var(--container-elevation);border-radius:var(--container-shape);background-color:var(--container-color);padding-block:var(--group-padding)}.menu:popover-open,.menu.menu-host{display:flex}.menu:popover-open,:host(:popover-open):has(.menu.menu-host){position-area:end span-end;border:none}:host(:popover-open):has(.menu.menu-host){overflow:visible;background:none;padding:0}.menu.menu-host{overflow:auto}.menu .divider,.menu ::slotted(.divider){margin:8px 16px}.menu-item{--between-space: 12px;--bottom-space: 8px;--container-color: transparent;--height: 44px;--inner-corner-corner-size: none;--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-label-lg);--label-text-axes: var(--md-sys-typescale-label-lg-axes);--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--leading-space: 16px;--shape: var(--md-sys-shape-corner-xs);--supporting-text-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-sm);--supporting-text-axes: var(--md-sys-typescale-body-sm-axes);--supporting-text-tracking: var(--md-sys-typescale-body-sm-tracking);--top-space: 8px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--trailing-space: 16px;--trailing-supporting-text: var(--md-sys-typescale-label-lg);--trailing-supporting-text-axes: var(--md-sys-typescale-label-lg-axes);--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-lg-tracking )}.menu-item:first-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}.menu-item:last-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}@container style(--menu-vibrant: true){.menu-item{--label-text-color: var(--md-sys-color-on-tertiary-container);--leading-icon-color: var(--md-sys-color-on-tertiary-container);--supporting-text-color: var(--md-sys-color-on-tertiary-container);--trailing-icon-color: var(--md-sys-color-on-tertiary-container);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container)}.menu-item:where(:hover,.hover){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:focus-within,.focus){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:active,.active){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}}.menu-item:is(:checked,.checked){--container-color: var(--md-sys-color-tertiary-container);--label-text-color: var(--md-sys-color-on-tertiary-container);--leading-icon-color: var(--md-sys-color-on-tertiary-container);--shape: var(--md-sys-shape-corner-md);--supporting-text-color: var(--md-sys-color-on-tertiary-container);--trailing-icon-color: var(--md-sys-color-on-tertiary-container);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container)}@container style(--menu-vibrant: true){.menu-item:is(:checked,.checked){--container-color: var(--md-sys-color-tertiary);--label-text-color: var(--md-sys-color-on-tertiary);--leading-icon-color: var(--md-sys-color-on-tertiary);--supporting-text-color: var(--md-sys-color-on-tertiary);--trailing-icon-color: var(--md-sys-color-on-tertiary);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary)}}.menu-item:is(:disabled,.disabled){--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%);--supporting-text-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%);--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% )}@container style(--menu-vibrant: true){.menu-item:is(:disabled,.disabled){--label-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--leading-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% )}}.menu-item:is(:disabled,.disabled):where(:checked,.checked){--container-color: hsl( from var(--md-sys-color-tertiary-container) h s l / 38% );--label-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--leading-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% )}.menu-item{position:relative;isolation:isolate;display:flex;align-items:center;user-select:none;box-sizing:border-box;gap:var(--between-space);min-height:calc(var(--height) + 4px);border-radius:var(--shape);padding-block:var(--top-space) var(--bottom-space);padding-inline:var(--leading-space) var(--trailing-space);background-image:none;outline:none;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes);-webkit-font-smoothing:antialiased}.menu-item::before{display:flex;content:\"\";position:absolute;inset:2px 4px;z-index:-1;border-radius:inherit;background-color:var(--container-color);background-image:var(--ripple);animation:var(--ripple-animation),var(--focus-ring-animation);transition:var(--ripple-transition);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset)}.menu-item:not(:disabled,.disabled){cursor:pointer}.menu-item .menu-item-content{display:flex;flex-direction:column;flex:1}.menu-item .menu-item-supporting-text{color:var(--supporting-text-color);font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);font-variation-settings:var(--supporting-text-axes)}.menu-item .menu-item-trailing-text{color:var(--trailing-supporting-text-color);font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);font-variation-settings:var(--trailing-supporting-text-axes)}.menu-item .menu-item-leading,.menu-item .menu-item-trailing{display:flex;align-items:center;gap:8px}.menu-item .menu-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.menu-item .menu-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}}\n`;\nexport default styles.styleSheet!;\n"]}

package/labs/gb/components/menu/menu.scss

@@ -113,6 +113,7 @@
       font: var(--label-text);
       letter-spacing: var(--label-text-tracking);
       font-variation-settings: var(--label-text-axes);
+      -webkit-font-smoothing: antialiased;
     }
 
     &::before {

package/labs/gb/components/navbar/_nav-bar-tokens.scss

@@ -0,0 +1,53 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  // LINT.IfChange
+  --container-color: var(--md-sys-color-surface-container);
+  --container-elevation: var(--md-sys-elevation-shadow-2);
+  --container-height: 64px;
+  --container-shadow-color: var(--md-sys-color-shadow);
+  --container-shape: var(--md-sys-shape-corner-none);
+  --item-active-icon-color: var(--md-sys-color-on-secondary-container);
+  --item-active-indicator-color: var(--md-sys-color-secondary-container);
+  --item-active-indicator-height: 32px;
+  --item-active-indicator-icon-label-space: 4px;
+  --item-active-indicator-leading-space: 16px;
+  --item-active-indicator-shape: var(--md-sys-shape-corner-full);
+  --item-active-indicator-trailing-space: 16px;
+  --item-active-indicator-width: 56px;
+  --item-active-label-text-color: var(--md-sys-color-secondary);
+  --item-active-state-layer-color: var(--md-sys-color-on-secondary-container);
+  --item-between-space: var(--md-sys-space-0);
+  --item-container-between-space: 6px;
+  --item-icon-size: 24px;
+  --item-inactive-icon-color: var(--md-sys-color-on-surface-variant);
+  --item-inactive-label-text-color: var(--md-sys-color-on-surface-variant);
+  --item-inactive-state-layer-color: var(--md-sys-color-on-secondary-container);
+  --item-label-text: var(--md-sys-typescale-label-md);
+  --item-label-text-axes: var(--md-sys-typescale-label-md-axes);
+  --item-label-text-tracking: var(--md-sys-typescale-label-md-tracking);
+  --motion-duration: var(--md-sys-motion-duration-short4);
+  --motion-easing: var(--md-sys-motion-easing-emphasized);
+  // LINT.ThenChange(nav-bar-element.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin item-vertical {
+  --item-active-indicator-height: 32px;
+  --item-active-indicator-icon-label-space: 4px;
+  --item-active-indicator-width: 56px;
+  --item-active-label-text-color: var(--md-sys-color-secondary);
+  --item-container-between-space: 6px;
+}
+
+@mixin item-horizontal {
+  --item-active-indicator-height: 40px;
+  --item-active-indicator-icon-label-space: 8px;
+  --item-active-indicator-leading-space: 16px;
+  --item-active-indicator-trailing-space: 16px;
+  --item-active-indicator-width: auto;
+  // Use on-secondary-container for accessibility contrast inside the pill.
+  --item-active-label-text-color: var(--md-sys-color-on-secondary-container);
+}

package/labs/gb/components/navbar/md-gb-nav-bar-item.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { NavBarItemElement } from './nav-bar-item-element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design gBreeze navigation bar item custom element. */
+        'md-gb-nav-bar-item': NavBarItemElement;
+    }
+}

package/labs/gb/components/navbar/md-gb-nav-bar-item.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { NavBarItemElement } from './nav-bar-item-element.js';
+if (!customElements.get('md-gb-nav-bar-item')) {
+    customElements.define('md-gb-nav-bar-item', NavBarItemElement);
+}
+//# sourceMappingURL=md-gb-nav-bar-item.js.map

package/labs/gb/components/navbar/md-gb-nav-bar-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"md-gb-nav-bar-item.js","sourceRoot":"","sources":["md-gb-nav-bar-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAC;AAS5D,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,oBAAoB,CAAC,EAAE,CAAC;IAC9C,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,CAAC;AACjE,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {NavBarItemElement} from './nav-bar-item-element.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design gBreeze navigation bar item custom element. */\n    'md-gb-nav-bar-item': NavBarItemElement;\n  }\n}\n\nif (!customElements.get('md-gb-nav-bar-item')) {\n  customElements.define('md-gb-nav-bar-item', NavBarItemElement);\n}\n"]}

package/labs/gb/components/navbar/md-gb-nav-bar.d.ts

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