@maicol07/material-web 2.3.0 → 2.5.1

package/labs/card/outlined-card.js

@@ -6,8 +6,8 @@
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
 import { Card } from './internal/card.js';
-import { styles as outlinedStyles } from './internal/outlined-styles.js';
-import { styles as sharedStyles } from './internal/shared-styles.js';
+import { styles as outlinedStyles } from './internal/outlined-styles.cssresult.js';
+import { styles as sharedStyles } from './internal/shared-styles.cssresult.js';
 /**
  * @final
  * @suppress {visibility}

package/labs/card/outlined-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"outlined-card.js","sourceRoot":"","sources":["outlined-card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,6BAA6B,CAAC;AAQnE;;;GAGG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,IAAI;;AACtB,qBAAM,GAAwB,CAAC,YAAY,EAAE,cAAc,CAAC,AAAtD,CAAuD;AADlE,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAE1B","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Card} from './internal/card.js';\nimport {styles as outlinedStyles} from './internal/outlined-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-card': MdOutlinedCard;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-card')\nexport class MdOutlinedCard extends Card {\n  static override styles: CSSResultOrNative[] = [sharedStyles, outlinedStyles];\n}\n"]}
+{"version":3,"file":"outlined-card.js","sourceRoot":"","sources":["outlined-card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAQ7E;;;GAGG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,IAAI;;AACtB,qBAAM,GAAwB,CAAC,YAAY,EAAE,cAAc,CAAC,AAAtD,CAAuD;AADlE,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAE1B","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Card} from './internal/card.js';\nimport {styles as outlinedStyles} from './internal/outlined-styles.cssresult.js';\nimport {styles as sharedStyles} from './internal/shared-styles.cssresult.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-card': MdOutlinedCard;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-card')\nexport class MdOutlinedCard extends Card {\n  static override styles: CSSResultOrNative[] = [sharedStyles, outlinedStyles];\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,54 @@
+/**
+ * @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 {
+    /** @nocollapse */
+    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,145 @@
+/**
+ * @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;
+    }
+}
+/** @nocollapse */
+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;;QAaE,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;;AA3FD,kBAAkB;AACF,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  /** @nocollapse */\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;

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

@@ -0,0 +1,96 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { createClassMapDirective } from '../shared/directives.js';
+/** App Bar size configurations. */
+export const APP_BAR_SIZES = {
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg',
+};
+/** App Bar variant configurations. */
+export const APP_BAR_VARIANTS = {
+    standard: 'standard',
+    search: 'search',
+};
+/** App Bar classes. */
+export const APP_BAR_CLASSES = {
+    appBar: 'app-bar',
+    appBarSm: 'app-bar-sm',
+    appBarMd: 'app-bar-md',
+    appBarLg: 'app-bar-lg',
+    appBarWithSubtitle: 'app-bar-with-subtitle',
+    appBarSearch: 'app-bar-search',
+    appBarScrolled: 'app-bar-scrolled',
+};
+/**
+ * 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 function appBarClasses({ size = 'sm', withSubtitle = false, variant = 'standard', scrolled = false, } = {}) {
+    return {
+        [APP_BAR_CLASSES.appBar]: true,
+        [APP_BAR_CLASSES.appBarSm]: size === APP_BAR_SIZES.sm || !size,
+        [APP_BAR_CLASSES.appBarMd]: size === APP_BAR_SIZES.md,
+        [APP_BAR_CLASSES.appBarLg]: size === APP_BAR_SIZES.lg,
+        [APP_BAR_CLASSES.appBarWithSubtitle]: withSubtitle,
+        [APP_BAR_CLASSES.appBarSearch]: variant === APP_BAR_VARIANTS.search,
+        [APP_BAR_CLASSES.appBarScrolled]: scrolled,
+    };
+}
+/**
+ * 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 function setupAppBar(appBar, opts) {
+    if (!opts?.scrollTarget) {
+        return;
+    }
+    const target = opts.scrollTarget;
+    const signal = opts.signal;
+    const onScroll = () => {
+        if (signal?.aborted)
+            return;
+        let scrollTop = 0;
+        if (target instanceof Window) {
+            scrollTop = target.scrollY || target.document.documentElement.scrollTop;
+        }
+        else if (target instanceof HTMLElement) {
+            scrollTop = target.scrollTop;
+        }
+        const isScrolled = scrollTop > 0;
+        const wasScrolled = appBar.classList.contains(APP_BAR_CLASSES.appBarScrolled);
+        if (isScrolled !== wasScrolled) {
+            appBar.classList.toggle(APP_BAR_CLASSES.appBarScrolled, isScrolled);
+            appBar.dispatchEvent(new CustomEvent('scrollstatechange', {
+                bubbles: true,
+                composed: true,
+                detail: { scrolled: isScrolled },
+            }));
+        }
+    };
+    target.addEventListener('scroll', onScroll, { passive: true, signal });
+    onScroll();
+}
+/**
+ * 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 const appBar = createClassMapDirective({
+    getClasses: appBarClasses,
+    setupElement: setupAppBar,
+});
+//# sourceMappingURL=app-bar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"app-bar.js","sourceRoot":"","sources":["app-bar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {type ClassInfo} from 'lit/directives/class-map.js';\n\nimport {createClassMapDirective} from '../shared/directives.js';\n\n/** App Bar size configuration types. */\nexport type AppBarSize = 'sm' | 'md' | 'lg';\n\n/** App Bar size configurations. */\nexport const APP_BAR_SIZES = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n} as const;\n\n/** App Bar variant configuration types. */\nexport type AppBarVariant = 'standard' | 'search';\n\n/** App Bar variant configurations. */\nexport const APP_BAR_VARIANTS = {\n  standard: 'standard',\n  search: 'search',\n} as const;\n\n/** App Bar classes. */\nexport const APP_BAR_CLASSES = {\n  appBar: 'app-bar',\n  appBarSm: 'app-bar-sm',\n  appBarMd: 'app-bar-md',\n  appBarLg: 'app-bar-lg',\n  appBarWithSubtitle: 'app-bar-with-subtitle',\n  appBarSearch: 'app-bar-search',\n  appBarScrolled: 'app-bar-scrolled',\n} as const;\n\n/** The state provided to the `appBarClasses()` function. */\nexport interface AppBarClassesState {\n  /** The size of the app bar (`sm`, `md`, `lg`). */\n  size?: AppBarSize;\n  /** Whether the app bar has a subtitle. */\n  withSubtitle?: boolean;\n  /** The behavior variant (`standard` or `search`). */\n  variant?: AppBarVariant;\n  /** Whether the app bar is in a scrolled or docked state (`.app-bar-scrolled`). */\n  scrolled?: boolean;\n}\n\n/**\n * Returns the app bar classes to apply to an element based on the given state.\n *\n * @param state The state of the app bar.\n * @return An object of class names and truthy values if they apply.\n */\nexport function appBarClasses({\n  size = 'sm',\n  withSubtitle = false,\n  variant = 'standard',\n  scrolled = false,\n}: AppBarClassesState = {}): ClassInfo {\n  return {\n    [APP_BAR_CLASSES.appBar]: true,\n    [APP_BAR_CLASSES.appBarSm]: size === APP_BAR_SIZES.sm || !size,\n    [APP_BAR_CLASSES.appBarMd]: size === APP_BAR_SIZES.md,\n    [APP_BAR_CLASSES.appBarLg]: size === APP_BAR_SIZES.lg,\n    [APP_BAR_CLASSES.appBarWithSubtitle]: withSubtitle,\n    [APP_BAR_CLASSES.appBarSearch]: variant === APP_BAR_VARIANTS.search,\n    [APP_BAR_CLASSES.appBarScrolled]: scrolled,\n  };\n}\n\n/**\n * Sets up optional scroll target tracking for the given app bar element when an explicit `scrollTarget` is provided.\n *\n * @param appBar The element on which to set up app bar functionality.\n * @param opts Setup options, containing an explicit `scrollTarget` and optional cleanup `signal`.\n */\nexport function setupAppBar(\n  appBar: HTMLElement,\n  opts?: {signal?: AbortSignal; scrollTarget?: HTMLElement | Window},\n): void {\n  if (!opts?.scrollTarget) {\n    return;\n  }\n  const target = opts.scrollTarget;\n  const signal = opts.signal;\n\n  const onScroll = () => {\n    if (signal?.aborted) return;\n    let scrollTop = 0;\n    if (target instanceof Window) {\n      scrollTop = target.scrollY || target.document.documentElement.scrollTop;\n    } else if (target instanceof HTMLElement) {\n      scrollTop = target.scrollTop;\n    }\n    const isScrolled = scrollTop > 0;\n    const wasScrolled = appBar.classList.contains(\n      APP_BAR_CLASSES.appBarScrolled,\n    );\n    if (isScrolled !== wasScrolled) {\n      appBar.classList.toggle(APP_BAR_CLASSES.appBarScrolled, isScrolled);\n      appBar.dispatchEvent(\n        new CustomEvent('scrollstatechange', {\n          bubbles: true,\n          composed: true,\n          detail: {scrolled: isScrolled},\n        }),\n      );\n    }\n  };\n\n  target.addEventListener('scroll', onScroll, {passive: true, signal});\n  onScroll();\n}\n\n/**\n * A Lit directive that adds app bar styling and optional scroll tracking functionality to its element.\n *\n * @example\n * ```ts\n * html`<div class=\"${appBar({size: 'md', scrolled: true})}\">\n *   <div class=\"app-bar-top-row\">...</div>\n *   <div class=\"app-bar-bottom-row\">...</div>\n * </div>`;\n * ```\n */\nexport const appBar = createClassMapDirective({\n  getClasses: appBarClasses,\n  setupElement: setupAppBar,\n});\n"]}