@material/web 2.4.2-nightly.fd6fe2a.0 → 2.5.1-nightly.70e259d.0

package/labs/aria/tabs/tabpanel.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement } from 'lit';
+declare const baseClass: import("../../behaviors/mixin.js").MixinReturn<import("../../behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../behaviors/element-internals.js").WithElementInternals>, import("../../behaviors/focusable.js").Focusable>;
+/**
+ * An ARIA tabpanel element.
+ */
+export declare class AriaTabpanelElement extends baseClass {
+    static styles: import("lit").CSSResult;
+    /**
+     * ID of the tab element that controls this tabpanel.
+     */
+    get tab(): string;
+    set tab(value: string);
+    /**
+     * The tab element that controls this tabpanel.
+     */
+    get tabElement(): Element | null;
+    set tabElement(value: Element | null);
+    constructor();
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/labs/aria/tabs/tabpanel.js

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html, isServer, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { queryAssociatedById } from '../../aria/query-associated.js';
+import { internals, mixinElementInternals, } from '../../behaviors/element-internals.js';
+import { mixinFocusable } from '../../behaviors/focusable.js';
+const baseClass = mixinFocusable(mixinElementInternals(LitElement));
+/**
+ * An ARIA tabpanel element.
+ */
+export class AriaTabpanelElement extends baseClass {
+    /**
+     * ID of the tab element that controls this tabpanel.
+     */
+    get tab() {
+        return this.tabElement?.id || '';
+    }
+    set tab(value) {
+        this.tabElement = queryAssociatedById(this, value);
+    }
+    /**
+     * The tab element that controls this tabpanel.
+     */
+    get tabElement() {
+        return this[internals].ariaLabelledByElements?.[0] || null;
+    }
+    set tabElement(value) {
+        this[internals].ariaLabelledByElements = value ? [value] : [];
+    }
+    constructor() {
+        super();
+        if (isServer)
+            return;
+        this[internals].role = 'tabpanel';
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+AriaTabpanelElement.styles = css `
+    :host(:not([hidden])) {
+      display: block;
+    }
+  `;
+__decorate([
+    property({ type: String, reflect: true, noAccessor: true })
+], AriaTabpanelElement.prototype, "tab", null);
+//# sourceMappingURL=tabpanel.js.map

package/labs/aria/tabs/tabpanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabpanel.js","sourceRoot":"","sources":["tabpanel.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AACpD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAC,mBAAmB,EAAC,MAAM,gCAAgC,CAAC;AACnE,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAC,cAAc,EAAC,MAAM,8BAA8B,CAAC;AAE5D,MAAM,SAAS,GAAG,cAAc,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CAAC;AAEpE;;GAEG;AACH,MAAM,OAAO,mBAAoB,SAAQ,SAAS;IAOhD;;OAEG;IAEH,IAAI,GAAG;QACL,OAAO,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,CAAC;IACnC,CAAC;IACD,IAAI,GAAG,CAAC,KAAa;QACnB,IAAI,CAAC,UAAU,GAAG,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IACrD,CAAC;IAED;;OAEG;IACH,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,sBAAsB,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;IAC7D,CAAC;IACD,IAAI,UAAU,CAAC,KAAqB;QAClC,IAAI,CAAC,SAAS,CAAC,CAAC,sBAAsB,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAChE,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QACR,IAAI,QAAQ;YAAE,OAAO;QACrB,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,UAAU,CAAC;IACpC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAnCe,0BAAM,GAAG,GAAG,CAAA;;;;GAI3B,CAAC;AAMF;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;8CAGzD","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, html, isServer, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {queryAssociatedById} from '../../aria/query-associated.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../behaviors/element-internals.js';\nimport {mixinFocusable} from '../../behaviors/focusable.js';\n\nconst baseClass = mixinFocusable(mixinElementInternals(LitElement));\n\n/**\n * An ARIA tabpanel element.\n */\nexport class AriaTabpanelElement extends baseClass {\n  static override styles = css`\n    :host(:not([hidden])) {\n      display: block;\n    }\n  `;\n\n  /**\n   * ID of the tab element that controls this tabpanel.\n   */\n  @property({type: String, reflect: true, noAccessor: true})\n  get tab(): string {\n    return this.tabElement?.id || '';\n  }\n  set tab(value: string) {\n    this.tabElement = queryAssociatedById(this, value);\n  }\n\n  /**\n   * The tab element that controls this tabpanel.\n   */\n  get tabElement(): Element | null {\n    return this[internals].ariaLabelledByElements?.[0] || null;\n  }\n  set tabElement(value: Element | null) {\n    this[internals].ariaLabelledByElements = value ? [value] : [];\n  }\n\n  constructor() {\n    super();\n    if (isServer) return;\n    this[internals].role = 'tabpanel';\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n"]}

package/labs/gb/components/appbar/_app-bar-tokens.scss

@@ -0,0 +1,136 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// Auto-generated by cascade_tokens
+// Add `// EDIT:` comments for manual adjustments.
+//
+// --prefix=md.comp.app-bar
+// --states=":small|[medium-flexible=medium]|[large-flexible=large],with-subtitle,search,on-scroll"
+// --exclude=".medium.,.large."
+
+@mixin root {
+  // LINT.IfChange
+  // md.comp.app-bar.avatar.size
+  --avatar-size: 32px;
+  // md.comp.app-bar.container.color
+  --container-color: var(--md-sys-color-surface);
+  // md.comp.app-bar.container.elevation
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  // md.comp.app-bar.small.container.height
+  --container-height: 64px;
+  // md.comp.app-bar.container.shape
+  --container-shape: var(--md-sys-shape-corner-none);
+  // md.comp.app-bar.icon-button-space
+  --icon-button-space: var(--md-sys-space-0);
+  // md.comp.app-bar.icon.size
+  --icon-size: 24px;
+  --label-text: unset;
+  --label-text-axes: unset;
+  --label-text-tracking: unset;
+  --label-color: unset;
+  // md.comp.app-bar.leading-icon.color
+  --leading-icon-color: var(--md-sys-color-on-surface);
+  // md.comp.app-bar.leading-space
+  --leading-space: var(--md-sys-space-50);
+  // ┌ md.comp.app-bar.small.subtitle.font
+  --subtitle: var(--md-sys-typescale-label-md);
+  // ┌┄ md.comp.app-bar.small.subtitle
+  --subtitle-axes: var(--md-sys-typescale-label-md-axes);
+  // md.comp.app-bar.subtitle.color
+  --subtitle-color: var(--md-sys-color-on-surface-variant);
+  // ┌┄ md.comp.app-bar.small.subtitle
+  --subtitle-tracking: var(--md-sys-typescale-label-md-tracking);
+  // ┌ md.comp.app-bar.small.title.font
+  --title: var(--md-sys-typescale-title-lg);
+  // ┌┄ md.comp.app-bar.small.title
+  --title-axes: var(--md-sys-typescale-title-lg-axes);
+  // md.comp.app-bar.title.color
+  --title-color: var(--md-sys-color-on-surface);
+  // ┌┄ md.comp.app-bar.small.title
+  --title-tracking: var(--md-sys-typescale-title-lg-tracking);
+  // md.comp.app-bar.trailing-icon.color
+  --trailing-icon-color: var(--md-sys-color-on-surface-variant);
+  // md.comp.app-bar.trailing-space
+  --trailing-space: var(--md-sys-space-50);
+  // LINT.ThenChange(md-gb-app-bar.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin medium {
+  // md.comp.app-bar.medium-flexible.container.height
+  --container-height: 112px;
+  // ┌ md.comp.app-bar.medium-flexible.subtitle.font
+  --subtitle: var(--md-sys-typescale-label-lg);
+  // ┌┄ md.comp.app-bar.medium-flexible.subtitle
+  --subtitle-axes: var(--md-sys-typescale-label-lg-axes);
+  // ┌┄ md.comp.app-bar.medium-flexible.subtitle
+  --subtitle-tracking: var(--md-sys-typescale-label-lg-tracking);
+  // ┌ md.comp.app-bar.medium-flexible.title.font
+  --title: var(--md-sys-typescale-headline-md);
+  // ┌┄ md.comp.app-bar.medium-flexible.title
+  --title-axes: var(--md-sys-typescale-headline-md-axes);
+  // ┌┄ md.comp.app-bar.medium-flexible.title
+  --title-tracking: var(--md-sys-typescale-headline-md-tracking);
+}
+
+@mixin large {
+  // md.comp.app-bar.large-flexible.container.height
+  --container-height: 120px;
+  // ┌ md.comp.app-bar.large-flexible.subtitle.font
+  --subtitle: var(--md-sys-typescale-title-md);
+  // ┌┄ md.comp.app-bar.large-flexible.subtitle
+  --subtitle-axes: var(--md-sys-typescale-title-md-axes);
+  // ┌┄ md.comp.app-bar.large-flexible.subtitle
+  --subtitle-tracking: var(--md-sys-typescale-title-md-tracking);
+  // ┌ md.comp.app-bar.large-flexible.title.font
+  --title: var(--md-sys-typescale-display-sm);
+  // ┌┄ md.comp.app-bar.large-flexible.title
+  --title-axes: var(--md-sys-typescale-display-sm-axes);
+  // ┌┄ md.comp.app-bar.large-flexible.title
+  --title-tracking: var(--md-sys-typescale-display-sm-tracking);
+}
+
+@mixin with-subtitle {
+  // ┌ md.comp.app-bar.medium-flexible.with-subtitle.container.height
+  --container-height: 136px;
+}
+
+@mixin with-subtitle-large {
+  // md.comp.app-bar.large-flexible.with-subtitle.container.height
+  --container-height: 152px;
+}
+
+@mixin search {
+  // md.comp.app-bar.search.container.color
+  --container-color: var(--md-sys-color-surface-container);
+  // md.comp.app-bar.small.search.container.height
+  --container-height: 56px;
+  // md.comp.app-bar.small.search.container.shape
+  --container-shape: var(--md-sys-shape-corner-full);
+  // ┌ md.comp.app-bar.small.search.label-text.font
+  --label-text: var(--md-sys-typescale-body-lg);
+  // ┌┄ md.comp.app-bar.small.search.label-text
+  --label-text-axes: var(--md-sys-typescale-body-lg-axes);
+  // ┌┄ md.comp.app-bar.small.search.label-text
+  --label-text-tracking: var(--md-sys-typescale-body-lg-tracking);
+  // md.comp.app-bar.search.label.color
+  --label-color: var(--md-sys-color-on-surface-variant);
+  // md.comp.app-bar.search.leading-space
+  --leading-space: var(--md-sys-space-100);
+  // md.comp.app-bar.search.trailing-space
+  --trailing-space: var(--md-sys-space-100);
+}
+
+@mixin on-scroll {
+  // md.comp.app-bar.on-scroll.container.color
+  --container-color: var(--md-sys-color-surface-container);
+  // md.comp.app-bar.on-scroll.container.elevation
+  --container-elevation: var(--md-sys-elevation-shadow-2);
+}
+
+@mixin on-scroll-search {
+  // md.comp.app-bar.search.on-scroll.container.color
+  --container-color: var(--md-sys-color-surface-container-highest);
+}
+

package/labs/gb/components/appbar/app-bar-element.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+import { type AppBarSize, type AppBarVariant } from './app-bar.js';
+/**
+ * A Material Design Expressive App Bar component (`md-gb-app-bar`).
+ *
+ * @slot - Used to display the primary title text of the app bar.
+ * @slot subtitle - Used to display an optional subtitle below the title in medium/large bars.
+ * @slot leading - Used to display the leading navigation icon button (e.g. menu or back).
+ * @slot trailing - Used to display trailing action buttons and/or user avatar.
+ * @slot search - Used to display search bar input or controls when `variant="search"`.
+ * @fires {CustomEvent<{scrolled: boolean}>} scrollstatechange - Fired when the scrolled state changes. --bubbles --composed
+ * @csspart app-bar - The root container element.
+ * @cssprop --avatar-size
+ * @cssprop --container-color
+ * @cssprop --container-elevation
+ * @cssprop --container-height
+ * @cssprop --container-shape
+ * @cssprop --icon-button-space
+ * @cssprop --icon-size
+ * @cssprop --label-text
+ * @cssprop --label-text-axes
+ * @cssprop --label-text-tracking
+ * @cssprop --label-color
+ * @cssprop --leading-icon-color
+ * @cssprop --leading-space
+ * @cssprop --subtitle
+ * @cssprop --subtitle-axes
+ * @cssprop --subtitle-color
+ * @cssprop --subtitle-tracking
+ * @cssprop --title
+ * @cssprop --title-axes
+ * @cssprop --title-color
+ * @cssprop --title-tracking
+ * @cssprop --trailing-icon-color
+ * @cssprop --trailing-space
+ */
+export declare class AppBarElement extends LitElement {
+    static styles: CSSResultOrNative[];
+    /** The size of the app bar (`sm`, `md`, `lg`). Defaults to `sm`. */
+    size: AppBarSize;
+    /** The behavioral variant of the app bar (`standard` or `search`). Defaults to `standard`. */
+    variant: AppBarVariant;
+    /** Whether the app bar is in its scrolled state. Defaults to `false`. */
+    scrolled: boolean;
+    private hasSubtitle;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private handleSubtitleSlotChange;
+}

package/labs/gb/components/appbar/app-bar-element.js

@@ -0,0 +1,144 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { appBar } from './app-bar.js';
+import { styles as appBarStyles } from './app-bar.cssresult.js';
+/**
+ * A Material Design Expressive App Bar component (`md-gb-app-bar`).
+ *
+ * @slot - Used to display the primary title text of the app bar.
+ * @slot subtitle - Used to display an optional subtitle below the title in medium/large bars.
+ * @slot leading - Used to display the leading navigation icon button (e.g. menu or back).
+ * @slot trailing - Used to display trailing action buttons and/or user avatar.
+ * @slot search - Used to display search bar input or controls when `variant="search"`.
+ * @fires {CustomEvent<{scrolled: boolean}>} scrollstatechange - Fired when the scrolled state changes. --bubbles --composed
+ * @csspart app-bar - The root container element.
+ * @cssprop --avatar-size
+ * @cssprop --container-color
+ * @cssprop --container-elevation
+ * @cssprop --container-height
+ * @cssprop --container-shape
+ * @cssprop --icon-button-space
+ * @cssprop --icon-size
+ * @cssprop --label-text
+ * @cssprop --label-text-axes
+ * @cssprop --label-text-tracking
+ * @cssprop --label-color
+ * @cssprop --leading-icon-color
+ * @cssprop --leading-space
+ * @cssprop --subtitle
+ * @cssprop --subtitle-axes
+ * @cssprop --subtitle-color
+ * @cssprop --subtitle-tracking
+ * @cssprop --title
+ * @cssprop --title-axes
+ * @cssprop --title-color
+ * @cssprop --title-tracking
+ * @cssprop --trailing-icon-color
+ * @cssprop --trailing-space
+ */
+export class AppBarElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The size of the app bar (`sm`, `md`, `lg`). Defaults to `sm`. */
+        this.size = 'sm';
+        /** The behavioral variant of the app bar (`standard` or `search`). Defaults to `standard`. */
+        this.variant = 'standard';
+        /** Whether the app bar is in its scrolled state. Defaults to `false`. */
+        this.scrolled = false;
+        this.hasSubtitle = false;
+    }
+    render() {
+        const withSubtitle = this.size !== 'sm' && this.hasSubtitle;
+        const directive = appBar({
+            size: this.size,
+            withSubtitle,
+            variant: this.variant,
+            scrolled: this.scrolled,
+        });
+        if (this.variant === 'search') {
+            return html `<div part="app-bar" class="${directive}">
+        <div class="app-bar-leading">
+          <slot name="leading"></slot>
+        </div>
+        <div class="app-bar-search-container">
+          <slot name="search"></slot>
+        </div>
+        <div class="app-bar-trailing">
+          <slot name="trailing"></slot>
+        </div>
+      </div>`;
+        }
+        if (this.size !== 'sm') {
+            return html `<div part="app-bar" class="${directive}">
+        <div class="app-bar-top-row">
+          <div class="app-bar-leading">
+            <slot name="leading"></slot>
+          </div>
+          <div class="app-bar-trailing">
+            <slot name="trailing"></slot>
+          </div>
+        </div>
+        <div class="app-bar-bottom-row">
+          <div class="app-bar-title-wrapper">
+            <div class="app-bar-title">
+              <slot></slot>
+            </div>
+            <div
+              class="app-bar-subtitle"
+              style="${withSubtitle ? '' : 'display: none;'}">
+              <slot
+                name="subtitle"
+                @slotchange=${this.handleSubtitleSlotChange}></slot>
+            </div>
+          </div>
+        </div>
+      </div>`;
+        }
+        return html `<div part="app-bar" class="${directive}">
+      <div class="app-bar-leading">
+        <slot name="leading"></slot>
+      </div>
+      <div class="app-bar-title-wrapper">
+        <div class="app-bar-title">
+          <slot></slot>
+        </div>
+      </div>
+      <div class="app-bar-trailing">
+        <slot name="trailing"></slot>
+      </div>
+    </div>`;
+    }
+    handleSubtitleSlotChange(event) {
+        const slot = event.target;
+        this.hasSubtitle = slot.assignedNodes({ flatten: true }).length > 0;
+    }
+}
+AppBarElement.styles = [
+    appBarStyles,
+    css `
+      :host {
+        display: flex;
+        width: 100%;
+        position: relative;
+      }
+    `,
+];
+__decorate([
+    property({ reflect: true })
+], AppBarElement.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], AppBarElement.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AppBarElement.prototype, "scrolled", void 0);
+__decorate([
+    state()
+], AppBarElement.prototype, "hasSubtitle", void 0);
+//# sourceMappingURL=app-bar-element.js.map

package/labs/gb/components/appbar/app-bar-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-bar-element.js","sourceRoot":"","sources":["app-bar-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAC,MAAM,EAAsC,MAAM,cAAc,CAAC;AACzE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,wBAAwB,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,OAAO,aAAc,SAAQ,UAAU;IAA7C;;QAYE,oEAAoE;QACzC,SAAI,GAAe,IAAI,CAAC;QAEnD,8FAA8F;QACnE,YAAO,GAAkB,UAAU,CAAC;QAE/D,yEAAyE;QAC/B,aAAQ,GAAG,KAAK,CAAC;QAE1C,gBAAW,GAAG,KAAK,CAAC;IAuEvC,CAAC;IArEoB,MAAM;QACvB,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC;QAC5D,MAAM,SAAS,GAAG,MAAM,CAAC;YACvB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,YAAY;YACZ,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;YAC9B,OAAO,IAAI,CAAA,8BAA8B,SAAS;;;;;;;;;;aAU3C,CAAC;QACV,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE,CAAC;YACvB,OAAO,IAAI,CAAA,8BAA8B,SAAS;;;;;;;;;;;;;;;;uBAgBjC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;;;8BAG7B,IAAI,CAAC,wBAAwB;;;;aAI9C,CAAC;QACV,CAAC;QAED,OAAO,IAAI,CAAA,8BAA8B,SAAS;;;;;;;;;;;;WAY3C,CAAC;IACV,CAAC;IAEO,wBAAwB,CAAC,KAAY;QAC3C,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAC7C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IACpE,CAAC;;AA1Fe,oBAAM,GAAwB;IAC5C,YAAY;IACZ,GAAG,CAAA;;;;;;KAMF;CACF,AATqB,CASpB;AAGyB;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;2CAAyB;AAGxB;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;8CAAqC;AAGrB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;+CAAkB;AAE1C;IAAhB,KAAK,EAAE;kDAA6B","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement} from 'lit';\nimport {property, state} from 'lit/decorators.js';\n\nimport {appBar, type AppBarSize, type AppBarVariant} from './app-bar.js';\nimport {styles as appBarStyles} from './app-bar.cssresult.js';\n\n/**\n * A Material Design Expressive App Bar component (`md-gb-app-bar`).\n *\n * @slot - Used to display the primary title text of the app bar.\n * @slot subtitle - Used to display an optional subtitle below the title in medium/large bars.\n * @slot leading - Used to display the leading navigation icon button (e.g. menu or back).\n * @slot trailing - Used to display trailing action buttons and/or user avatar.\n * @slot search - Used to display search bar input or controls when `variant=\"search\"`.\n * @fires {CustomEvent<{scrolled: boolean}>} scrollstatechange - Fired when the scrolled state changes. --bubbles --composed\n * @csspart app-bar - The root container element.\n * @cssprop --avatar-size\n * @cssprop --container-color\n * @cssprop --container-elevation\n * @cssprop --container-height\n * @cssprop --container-shape\n * @cssprop --icon-button-space\n * @cssprop --icon-size\n * @cssprop --label-text\n * @cssprop --label-text-axes\n * @cssprop --label-text-tracking\n * @cssprop --label-color\n * @cssprop --leading-icon-color\n * @cssprop --leading-space\n * @cssprop --subtitle\n * @cssprop --subtitle-axes\n * @cssprop --subtitle-color\n * @cssprop --subtitle-tracking\n * @cssprop --title\n * @cssprop --title-axes\n * @cssprop --title-color\n * @cssprop --title-tracking\n * @cssprop --trailing-icon-color\n * @cssprop --trailing-space\n */\nexport class AppBarElement extends LitElement {\n  static override styles: CSSResultOrNative[] = [\n    appBarStyles,\n    css`\n      :host {\n        display: flex;\n        width: 100%;\n        position: relative;\n      }\n    `,\n  ];\n\n  /** The size of the app bar (`sm`, `md`, `lg`). Defaults to `sm`. */\n  @property({reflect: true}) size: AppBarSize = 'sm';\n\n  /** The behavioral variant of the app bar (`standard` or `search`). Defaults to `standard`. */\n  @property({reflect: true}) variant: AppBarVariant = 'standard';\n\n  /** Whether the app bar is in its scrolled state. Defaults to `false`. */\n  @property({type: Boolean, reflect: true}) scrolled = false;\n\n  @state() private hasSubtitle = false;\n\n  protected override render() {\n    const withSubtitle = this.size !== 'sm' && this.hasSubtitle;\n    const directive = appBar({\n      size: this.size,\n      withSubtitle,\n      variant: this.variant,\n      scrolled: this.scrolled,\n    });\n\n    if (this.variant === 'search') {\n      return html`<div part=\"app-bar\" class=\"${directive}\">\n        <div class=\"app-bar-leading\">\n          <slot name=\"leading\"></slot>\n        </div>\n        <div class=\"app-bar-search-container\">\n          <slot name=\"search\"></slot>\n        </div>\n        <div class=\"app-bar-trailing\">\n          <slot name=\"trailing\"></slot>\n        </div>\n      </div>`;\n    }\n\n    if (this.size !== 'sm') {\n      return html`<div part=\"app-bar\" class=\"${directive}\">\n        <div class=\"app-bar-top-row\">\n          <div class=\"app-bar-leading\">\n            <slot name=\"leading\"></slot>\n          </div>\n          <div class=\"app-bar-trailing\">\n            <slot name=\"trailing\"></slot>\n          </div>\n        </div>\n        <div class=\"app-bar-bottom-row\">\n          <div class=\"app-bar-title-wrapper\">\n            <div class=\"app-bar-title\">\n              <slot></slot>\n            </div>\n            <div\n              class=\"app-bar-subtitle\"\n              style=\"${withSubtitle ? '' : 'display: none;'}\">\n              <slot\n                name=\"subtitle\"\n                @slotchange=${this.handleSubtitleSlotChange}></slot>\n            </div>\n          </div>\n        </div>\n      </div>`;\n    }\n\n    return html`<div part=\"app-bar\" class=\"${directive}\">\n      <div class=\"app-bar-leading\">\n        <slot name=\"leading\"></slot>\n      </div>\n      <div class=\"app-bar-title-wrapper\">\n        <div class=\"app-bar-title\">\n          <slot></slot>\n        </div>\n      </div>\n      <div class=\"app-bar-trailing\">\n        <slot name=\"trailing\"></slot>\n      </div>\n    </div>`;\n  }\n\n  private handleSubtitleSlotChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasSubtitle = slot.assignedNodes({flatten: true}).length > 0;\n  }\n}\n"]}

package/labs/gb/components/appbar/app-bar.css

@@ -0,0 +1,4 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys;@layer md.comp.app-bar{.app-bar{--avatar-size: 32px;--container-color: var(--md-sys-color-surface);--container-elevation: var(--md-sys-elevation-shadow-0);--container-height: 64px;--container-shape: var(--md-sys-shape-corner-none);--icon-button-space: var(--md-sys-space-0);--icon-size: 24px;--label-text: unset;--label-text-axes: unset;--label-text-tracking: unset;--label-color: unset;--leading-icon-color: var(--md-sys-color-on-surface);--leading-space: var(--md-sys-space-50);--subtitle: var(--md-sys-typescale-label-md);--subtitle-axes: var(--md-sys-typescale-label-md-axes);--subtitle-color: var(--md-sys-color-on-surface-variant);--subtitle-tracking: var(--md-sys-typescale-label-md-tracking);--title: var(--md-sys-typescale-title-lg);--title-axes: var(--md-sys-typescale-title-lg-axes);--title-color: var(--md-sys-color-on-surface);--title-tracking: var(--md-sys-typescale-title-lg-tracking);--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-space: var(--md-sys-space-50)}.app-bar-md{--container-height: 112px;--subtitle: var(--md-sys-typescale-label-lg);--subtitle-axes: var(--md-sys-typescale-label-lg-axes);--subtitle-tracking: var(--md-sys-typescale-label-lg-tracking);--title: var(--md-sys-typescale-headline-md);--title-axes: var(--md-sys-typescale-headline-md-axes);--title-tracking: var(--md-sys-typescale-headline-md-tracking)}.app-bar-lg{--container-height: 120px;--subtitle: var(--md-sys-typescale-title-md);--subtitle-axes: var(--md-sys-typescale-title-md-axes);--subtitle-tracking: var(--md-sys-typescale-title-md-tracking);--title: var(--md-sys-typescale-display-sm);--title-axes: var(--md-sys-typescale-display-sm-axes);--title-tracking: var(--md-sys-typescale-display-sm-tracking)}.app-bar-with-subtitle{--container-height: 136px}.app-bar-with-subtitle.app-bar-lg{--container-height: 152px}.app-bar-search{--container-color: var(--md-sys-color-surface-container);--container-height: 56px;--container-shape: var(--md-sys-shape-corner-full);--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);--label-color: var(--md-sys-color-on-surface-variant);--leading-space: var(--md-sys-space-100);--trailing-space: var(--md-sys-space-100)}.app-bar-scrolled{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2)}.app-bar-scrolled.app-bar-search{--container-color: var(--md-sys-color-surface-container-highest)}.app-bar{box-sizing:border-box;display:flex;position:relative;width:100%;min-height:var(--container-height);background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);color:var(--title-color);transition:background-color 200ms ease,box-shadow 200ms ease,min-height 200ms ease;padding-inline:var(--leading-space) var(--trailing-space)}.app-bar-sm,.app-bar-search{flex-direction:row;align-items:center;justify-content:space-between}.app-bar-md,.app-bar-lg{flex-direction:column;justify-content:space-between;align-items:stretch}.app-bar-md .app-bar-top-row,.app-bar-lg .app-bar-top-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;min-height:64px;width:100%}.app-bar-md .app-bar-bottom-row,.app-bar-lg .app-bar-bottom-row{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:24px;padding-inline:12px;flex:1 1 auto;min-height:0}.app-bar-leading,.app-bar-trailing{display:flex;align-items:center;gap:var(--icon-button-space);flex-shrink:0}.app-bar-leading{color:var(--leading-icon-color)}.app-bar-trailing{color:var(--trailing-icon-color)}.app-bar-title-wrapper{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-width:0;overflow:hidden}.app-bar-sm .app-bar-title-wrapper{margin-inline:4px}.app-bar-title{margin:0;font:var(--title);font-variation-settings:var(--title-axes);letter-spacing:var(--title-tracking);color:var(--title-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-title ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-subtitle{margin:0;margin-top:2px;font:var(--subtitle);font-variation-settings:var(--subtitle-axes);letter-spacing:var(--subtitle-tracking);color:var(--subtitle-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-subtitle ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-search-container{display:flex;flex:1 1 auto;align-items:center;min-width:0;margin-inline:8px}}/*# sourceMappingURL=app-bar.css.map */

package/labs/gb/components/appbar/app-bar.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["app-bar.scss","_app-bar-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,cACA,uBAEE,SCGA,oBAEA,+CAEA,wDAEA,yBAEA,mDAEA,2CAEA,kBACA,oBACA,yBACA,6BACA,qBAEA,qDAEA,wCAEA,6CAEA,uDAEA,yDAEA,+DAEA,0CAEA,oDAEA,8CAEA,4DAEA,8DAEA,yCDxCA,YC8CA,0BAEA,6CAEA,uDAEA,+DAEA,6CAEA,uDAEA,+DDvDA,YC4DA,0BAEA,6CAEA,uDAEA,+DAEA,4CAEA,sDAEA,8DDrEA,uBC0EA,0BDvEA,kCC4EA,0BDzEA,gBC8EA,yDAEA,yBAEA,mDAEA,8CAEA,wDAEA,gEAEA,sDAEA,yCAEA,0CD3FA,kBCgGA,yDAEA,wDD/FA,iCCoGA,iED/FA,SACE,sBACA,aACA,kBACA,WACA,mCACA,wCACA,qCACA,sCACA,yBACA,WACE,wEAGF,0DAIF,4BAEE,mBACA,mBACA,8BAIF,wBAEE,sBACA,8BACA,oBAEA,0DACE,aACA,mBACA,mBACA,8BACA,gBACA,WAGF,gEACE,aACA,sBACA,yBACA,oBACA,oBACA,cACA,aAKJ,mCAEE,aACA,mBACA,6BACA,cAGF,iBACE,gCAGF,kBACE,iCAGF,uBACE,aACA,sBACA,uBACA,cACA,YACA,gBAGF,mCACE,kBAGF,eACE,SACA,kBACA,0CACA,qCACA,yBACA,mBACA,gBACA,uBAEA,4BACE,SACA,aACA,gCACA,uBACA,cAIJ,kBACE,SACA,eACA,qBACA,6CACA,wCACA,4BACA,mBACA,gBACA,uBAEA,+BACE,SACA,aACA,gCACA,uBACA,cAIJ,0BACE,aACA,cACA,mBACA,YACA","file":"app-bar.css"}

package/labs/gb/components/appbar/app-bar.cssresult.d.ts

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

package/labs/gb/components/appbar/app-bar.cssresult.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/components/appbar/app-bar.css.
+import { css } from 'lit';
+export const styles = css `/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys;@layer md.comp.app-bar{.app-bar{--avatar-size: 32px;--container-color: var(--md-sys-color-surface);--container-elevation: var(--md-sys-elevation-shadow-0);--container-height: 64px;--container-shape: var(--md-sys-shape-corner-none);--icon-button-space: var(--md-sys-space-0);--icon-size: 24px;--label-text: unset;--label-text-axes: unset;--label-text-tracking: unset;--label-color: unset;--leading-icon-color: var(--md-sys-color-on-surface);--leading-space: var(--md-sys-space-50);--subtitle: var(--md-sys-typescale-label-md);--subtitle-axes: var(--md-sys-typescale-label-md-axes);--subtitle-color: var(--md-sys-color-on-surface-variant);--subtitle-tracking: var(--md-sys-typescale-label-md-tracking);--title: var(--md-sys-typescale-title-lg);--title-axes: var(--md-sys-typescale-title-lg-axes);--title-color: var(--md-sys-color-on-surface);--title-tracking: var(--md-sys-typescale-title-lg-tracking);--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-space: var(--md-sys-space-50)}.app-bar-md{--container-height: 112px;--subtitle: var(--md-sys-typescale-label-lg);--subtitle-axes: var(--md-sys-typescale-label-lg-axes);--subtitle-tracking: var(--md-sys-typescale-label-lg-tracking);--title: var(--md-sys-typescale-headline-md);--title-axes: var(--md-sys-typescale-headline-md-axes);--title-tracking: var(--md-sys-typescale-headline-md-tracking)}.app-bar-lg{--container-height: 120px;--subtitle: var(--md-sys-typescale-title-md);--subtitle-axes: var(--md-sys-typescale-title-md-axes);--subtitle-tracking: var(--md-sys-typescale-title-md-tracking);--title: var(--md-sys-typescale-display-sm);--title-axes: var(--md-sys-typescale-display-sm-axes);--title-tracking: var(--md-sys-typescale-display-sm-tracking)}.app-bar-with-subtitle{--container-height: 136px}.app-bar-with-subtitle.app-bar-lg{--container-height: 152px}.app-bar-search{--container-color: var(--md-sys-color-surface-container);--container-height: 56px;--container-shape: var(--md-sys-shape-corner-full);--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);--label-color: var(--md-sys-color-on-surface-variant);--leading-space: var(--md-sys-space-100);--trailing-space: var(--md-sys-space-100)}.app-bar-scrolled{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2)}.app-bar-scrolled.app-bar-search{--container-color: var(--md-sys-color-surface-container-highest)}.app-bar{box-sizing:border-box;display:flex;position:relative;width:100%;min-height:var(--container-height);background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);color:var(--title-color);transition:background-color 200ms ease,box-shadow 200ms ease,min-height 200ms ease;padding-inline:var(--leading-space) var(--trailing-space)}.app-bar-sm,.app-bar-search{flex-direction:row;align-items:center;justify-content:space-between}.app-bar-md,.app-bar-lg{flex-direction:column;justify-content:space-between;align-items:stretch}.app-bar-md .app-bar-top-row,.app-bar-lg .app-bar-top-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;min-height:64px;width:100%}.app-bar-md .app-bar-bottom-row,.app-bar-lg .app-bar-bottom-row{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:24px;padding-inline:12px;flex:1 1 auto;min-height:0}.app-bar-leading,.app-bar-trailing{display:flex;align-items:center;gap:var(--icon-button-space);flex-shrink:0}.app-bar-leading{color:var(--leading-icon-color)}.app-bar-trailing{color:var(--trailing-icon-color)}.app-bar-title-wrapper{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-width:0;overflow:hidden}.app-bar-sm .app-bar-title-wrapper{margin-inline:4px}.app-bar-title{margin:0;font:var(--title);font-variation-settings:var(--title-axes);letter-spacing:var(--title-tracking);color:var(--title-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-title ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-subtitle{margin:0;margin-top:2px;font:var(--subtitle);font-variation-settings:var(--subtitle-axes);letter-spacing:var(--subtitle-tracking);color:var(--subtitle-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-subtitle ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-search-container{display:flex;flex:1 1 auto;align-items:center;min-width:0;margin-inline:8px}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=app-bar.cssresult.js.map

package/labs/gb/components/appbar/app-bar.cssresult.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-bar.cssresult.js","sourceRoot":"","sources":["app-bar.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,oEAAoE;AACpE,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/appbar/app-bar.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;@layer md.comp.app-bar{.app-bar{--avatar-size: 32px;--container-color: var(--md-sys-color-surface);--container-elevation: var(--md-sys-elevation-shadow-0);--container-height: 64px;--container-shape: var(--md-sys-shape-corner-none);--icon-button-space: var(--md-sys-space-0);--icon-size: 24px;--label-text: unset;--label-text-axes: unset;--label-text-tracking: unset;--label-color: unset;--leading-icon-color: var(--md-sys-color-on-surface);--leading-space: var(--md-sys-space-50);--subtitle: var(--md-sys-typescale-label-md);--subtitle-axes: var(--md-sys-typescale-label-md-axes);--subtitle-color: var(--md-sys-color-on-surface-variant);--subtitle-tracking: var(--md-sys-typescale-label-md-tracking);--title: var(--md-sys-typescale-title-lg);--title-axes: var(--md-sys-typescale-title-lg-axes);--title-color: var(--md-sys-color-on-surface);--title-tracking: var(--md-sys-typescale-title-lg-tracking);--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-space: var(--md-sys-space-50)}.app-bar-md{--container-height: 112px;--subtitle: var(--md-sys-typescale-label-lg);--subtitle-axes: var(--md-sys-typescale-label-lg-axes);--subtitle-tracking: var(--md-sys-typescale-label-lg-tracking);--title: var(--md-sys-typescale-headline-md);--title-axes: var(--md-sys-typescale-headline-md-axes);--title-tracking: var(--md-sys-typescale-headline-md-tracking)}.app-bar-lg{--container-height: 120px;--subtitle: var(--md-sys-typescale-title-md);--subtitle-axes: var(--md-sys-typescale-title-md-axes);--subtitle-tracking: var(--md-sys-typescale-title-md-tracking);--title: var(--md-sys-typescale-display-sm);--title-axes: var(--md-sys-typescale-display-sm-axes);--title-tracking: var(--md-sys-typescale-display-sm-tracking)}.app-bar-with-subtitle{--container-height: 136px}.app-bar-with-subtitle.app-bar-lg{--container-height: 152px}.app-bar-search{--container-color: var(--md-sys-color-surface-container);--container-height: 56px;--container-shape: var(--md-sys-shape-corner-full);--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);--label-color: var(--md-sys-color-on-surface-variant);--leading-space: var(--md-sys-space-100);--trailing-space: var(--md-sys-space-100)}.app-bar-scrolled{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2)}.app-bar-scrolled.app-bar-search{--container-color: var(--md-sys-color-surface-container-highest)}.app-bar{box-sizing:border-box;display:flex;position:relative;width:100%;min-height:var(--container-height);background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);color:var(--title-color);transition:background-color 200ms ease,box-shadow 200ms ease,min-height 200ms ease;padding-inline:var(--leading-space) var(--trailing-space)}.app-bar-sm,.app-bar-search{flex-direction:row;align-items:center;justify-content:space-between}.app-bar-md,.app-bar-lg{flex-direction:column;justify-content:space-between;align-items:stretch}.app-bar-md .app-bar-top-row,.app-bar-lg .app-bar-top-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;min-height:64px;width:100%}.app-bar-md .app-bar-bottom-row,.app-bar-lg .app-bar-bottom-row{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:24px;padding-inline:12px;flex:1 1 auto;min-height:0}.app-bar-leading,.app-bar-trailing{display:flex;align-items:center;gap:var(--icon-button-space);flex-shrink:0}.app-bar-leading{color:var(--leading-icon-color)}.app-bar-trailing{color:var(--trailing-icon-color)}.app-bar-title-wrapper{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-width:0;overflow:hidden}.app-bar-sm .app-bar-title-wrapper{margin-inline:4px}.app-bar-title{margin:0;font:var(--title);font-variation-settings:var(--title-axes);letter-spacing:var(--title-tracking);color:var(--title-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-title ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-subtitle{margin:0;margin-top:2px;font:var(--subtitle);font-variation-settings:var(--subtitle-axes);letter-spacing:var(--subtitle-tracking);color:var(--subtitle-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-subtitle ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-search-container{display:flex;flex:1 1 auto;align-items:center;min-width:0;margin-inline:8px}}\n`;\nexport default styles.styleSheet!;\n"]}

package/labs/gb/components/appbar/app-bar.d.ts

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/** App Bar size configuration types. */
+export type AppBarSize = 'sm' | 'md' | 'lg';
+/** App Bar size configurations. */
+export declare const APP_BAR_SIZES: {
+    readonly sm: "sm";
+    readonly md: "md";
+    readonly lg: "lg";
+};
+/** App Bar variant configuration types. */
+export type AppBarVariant = 'standard' | 'search';
+/** App Bar variant configurations. */
+export declare const APP_BAR_VARIANTS: {
+    readonly standard: "standard";
+    readonly search: "search";
+};
+/** App Bar classes. */
+export declare const APP_BAR_CLASSES: {
+    readonly appBar: "app-bar";
+    readonly appBarSm: "app-bar-sm";
+    readonly appBarMd: "app-bar-md";
+    readonly appBarLg: "app-bar-lg";
+    readonly appBarWithSubtitle: "app-bar-with-subtitle";
+    readonly appBarSearch: "app-bar-search";
+    readonly appBarScrolled: "app-bar-scrolled";
+};
+/** The state provided to the `appBarClasses()` function. */
+export interface AppBarClassesState {
+    /** The size of the app bar (`sm`, `md`, `lg`). */
+    size?: AppBarSize;
+    /** Whether the app bar has a subtitle. */
+    withSubtitle?: boolean;
+    /** The behavior variant (`standard` or `search`). */
+    variant?: AppBarVariant;
+    /** Whether the app bar is in a scrolled or docked state (`.app-bar-scrolled`). */
+    scrolled?: boolean;
+}
+/**
+ * Returns the app bar classes to apply to an element based on the given state.
+ *
+ * @param state The state of the app bar.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function appBarClasses({ size, withSubtitle, variant, scrolled, }?: AppBarClassesState): ClassInfo;
+/**
+ * Sets up optional scroll target tracking for the given app bar element when an explicit `scrollTarget` is provided.
+ *
+ * @param appBar The element on which to set up app bar functionality.
+ * @param opts Setup options, containing an explicit `scrollTarget` and optional cleanup `signal`.
+ */
+export declare function setupAppBar(appBar: HTMLElement, opts?: {
+    signal?: AbortSignal;
+    scrollTarget?: HTMLElement | Window;
+}): void;
+/**
+ * A Lit directive that adds app bar styling and optional scroll tracking functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`<div class="${appBar({size: 'md', scrolled: true})}">
+ *   <div class="app-bar-top-row">...</div>
+ *   <div class="app-bar-bottom-row">...</div>
+ * </div>`;
+ * ```
+ */
+export declare const appBar: (state?: AppBarClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;