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

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

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

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

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

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

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, type PropertyValues } from 'lit';
+import { AriaTablistElement } from '../../../aria/tabs/tablist.js';
+import { type NavBarItemLayout } from './nav-bar.js';
+/**
+ * A Material Design gBreeze navigation bar component.
+ *
+ * @slot - Used to display navigation bar items (`md-gb-nav-bar-item`).
+ * @csspart nav-bar - The navigation bar's root container.
+ * @fires {Event} change - Fired when the selected navigation bar item changes. --bubbles
+ * @cssprop --container-color
+ * @cssprop --container-elevation
+ * @cssprop --container-height
+ * @cssprop --container-shadow-color
+ * @cssprop --container-shape
+ * @cssprop --item-active-icon-color
+ * @cssprop --item-active-indicator-color
+ * @cssprop --item-active-indicator-height
+ * @cssprop --item-active-indicator-icon-label-space
+ * @cssprop --item-active-indicator-leading-space
+ * @cssprop --item-active-indicator-shape
+ * @cssprop --item-active-indicator-trailing-space
+ * @cssprop --item-active-indicator-width
+ * @cssprop --item-active-label-text-color
+ * @cssprop --item-active-state-layer-color
+ * @cssprop --item-between-space
+ * @cssprop --item-container-between-space
+ * @cssprop --item-icon-size
+ * @cssprop --item-inactive-icon-color
+ * @cssprop --item-inactive-label-text-color
+ * @cssprop --item-inactive-state-layer-color
+ * @cssprop --item-label-text
+ * @cssprop --item-label-text-axes
+ * @cssprop --item-label-text-tracking
+ * @cssprop --motion-duration
+ * @cssprop --motion-easing
+ */
+export declare class NavBarElement extends AriaTablistElement {
+    /** @nocollapse */
+    static styles: CSSResultOrNative[];
+    /** The layout orientation of items ('vertical' or 'horizontal'). */
+    itemLayout: NavBarItemLayout;
+    /**
+     * The 0-based index of the currently active navigation bar item.
+     * Alias for `selectedTabIndex`.
+     */
+    get selectedIndex(): number;
+    set selectedIndex(index: number);
+    connectedCallback(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected handleSlotChange(): void;
+    private syncItemsLayout;
+}

package/labs/gb/components/navbar/nav-bar-element.js

@@ -0,0 +1,116 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { AriaTablistElement } from '../../../aria/tabs/tablist.js';
+import { adoptStyles } from '../../styles/adopt-styles.js';
+import navBarStyles from './nav-bar.css' with { type: 'css' }; // github-only
+// import {styles as navBarStyles} from './nav-bar.cssresult.js'; // google3-only
+import { navBar } from './nav-bar.js';
+import { NavBarItemElement } from './nav-bar-item-element.js';
+/**
+ * A Material Design gBreeze navigation bar component.
+ *
+ * @slot - Used to display navigation bar items (`md-gb-nav-bar-item`).
+ * @csspart nav-bar - The navigation bar's root container.
+ * @fires {Event} change - Fired when the selected navigation bar item changes. --bubbles
+ * @cssprop --container-color
+ * @cssprop --container-elevation
+ * @cssprop --container-height
+ * @cssprop --container-shadow-color
+ * @cssprop --container-shape
+ * @cssprop --item-active-icon-color
+ * @cssprop --item-active-indicator-color
+ * @cssprop --item-active-indicator-height
+ * @cssprop --item-active-indicator-icon-label-space
+ * @cssprop --item-active-indicator-leading-space
+ * @cssprop --item-active-indicator-shape
+ * @cssprop --item-active-indicator-trailing-space
+ * @cssprop --item-active-indicator-width
+ * @cssprop --item-active-label-text-color
+ * @cssprop --item-active-state-layer-color
+ * @cssprop --item-between-space
+ * @cssprop --item-container-between-space
+ * @cssprop --item-icon-size
+ * @cssprop --item-inactive-icon-color
+ * @cssprop --item-inactive-label-text-color
+ * @cssprop --item-inactive-state-layer-color
+ * @cssprop --item-label-text
+ * @cssprop --item-label-text-axes
+ * @cssprop --item-label-text-tracking
+ * @cssprop --motion-duration
+ * @cssprop --motion-easing
+ */
+export class NavBarElement extends AriaTablistElement {
+    constructor() {
+        super(...arguments);
+        /** The layout orientation of items ('vertical' or 'horizontal'). */
+        this.itemLayout = 'vertical';
+    }
+    /**
+     * The 0-based index of the currently active navigation bar item.
+     * Alias for `selectedTabIndex`.
+     */
+    get selectedIndex() {
+        return this.selectedTabIndex;
+    }
+    set selectedIndex(index) {
+        this.selectedTabIndex = index;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        adoptStyles(this, navBarStyles);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('itemLayout')) {
+            this.syncItemsLayout();
+        }
+    }
+    render() {
+        return html `
+      <div
+        part="nav-bar"
+        class="${navBar({
+            itemLayout: this.itemLayout,
+        })}">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+    }
+    handleSlotChange() {
+        super.handleSlotChange();
+        this.syncItemsLayout();
+    }
+    syncItemsLayout() {
+        for (const tab of this.tabs) {
+            if (tab instanceof NavBarItemElement) {
+                tab.itemLayout = this.itemLayout;
+            }
+            else {
+                tab.setAttribute('item-layout', this.itemLayout);
+            }
+        }
+    }
+}
+/** @nocollapse */
+NavBarElement.styles = [
+    navBarStyles,
+    css `
+      :host {
+        display: flex;
+        width: 100%;
+      }
+    `,
+];
+__decorate([
+    property({ attribute: 'item-layout', reflect: true })
+], NavBarElement.prototype, "itemLayout", void 0);
+__decorate([
+    property({ type: Number, attribute: 'selected-index', noAccessor: true })
+], NavBarElement.prototype, "selectedIndex", null);
+//# sourceMappingURL=nav-bar-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-bar-element.js","sourceRoot":"","sources":["nav-bar-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAsB,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,kBAAkB,EAAC,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAC,WAAW,EAAC,MAAM,8BAA8B,CAAC;AAEzD,OAAO,YAAY,MAAM,eAAe,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAC3E,iFAAiF;AAEjF,OAAO,EAAC,MAAM,EAAwB,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,OAAO,aAAc,SAAQ,kBAAkB;IAArD;;QAYE,oEAAoE;QAEpE,eAAU,GAAqB,UAAU,CAAC;IAoD5C,CAAC;IAlDC;;;OAGG;IAEH,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,gBAAgB,CAAC;IAC/B,CAAC;IACD,IAAI,aAAa,CAAC,KAAa;QAC7B,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;IAChC,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,WAAW,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;IAClC,CAAC;IAEkB,OAAO,CAAC,iBAAuC;QAChE,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YACxC,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;iBAGE,MAAM,CAAC;YACd,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B,CAAC;4BACkB,IAAI,CAAC,gBAAgB;;KAE5C,CAAC;IACJ,CAAC;IAEkB,gBAAgB;QACjC,KAAK,CAAC,gBAAgB,EAAE,CAAC;QACzB,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,eAAe;QACrB,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAC5B,IAAI,GAAG,YAAY,iBAAiB,EAAE,CAAC;gBACrC,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACN,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;YACnD,CAAC;QACH,CAAC;IACH,CAAC;;AAhED,kBAAkB;AACF,oBAAM,GAAwB;IAC5C,YAAY;IACZ,GAAG,CAAA;;;;;KAKF;CACF,AARqB,CAQpB;AAIF;IADC,QAAQ,CAAC,EAAC,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;iDACV;AAO1C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;kDAGvE","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, type PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {AriaTablistElement} from '../../../aria/tabs/tablist.js';\nimport {adoptStyles} from '../../styles/adopt-styles.js';\n\nimport navBarStyles from './nav-bar.css' with {type: 'css'}; // github-only\n// import {styles as navBarStyles} from './nav-bar.cssresult.js'; // google3-only\n\nimport {navBar, type NavBarItemLayout} from './nav-bar.js';\nimport {NavBarItemElement} from './nav-bar-item-element.js';\n\n/**\n * A Material Design gBreeze navigation bar component.\n *\n * @slot - Used to display navigation bar items (`md-gb-nav-bar-item`).\n * @csspart nav-bar - The navigation bar's root container.\n * @fires {Event} change - Fired when the selected navigation bar item changes. --bubbles\n * @cssprop --container-color\n * @cssprop --container-elevation\n * @cssprop --container-height\n * @cssprop --container-shadow-color\n * @cssprop --container-shape\n * @cssprop --item-active-icon-color\n * @cssprop --item-active-indicator-color\n * @cssprop --item-active-indicator-height\n * @cssprop --item-active-indicator-icon-label-space\n * @cssprop --item-active-indicator-leading-space\n * @cssprop --item-active-indicator-shape\n * @cssprop --item-active-indicator-trailing-space\n * @cssprop --item-active-indicator-width\n * @cssprop --item-active-label-text-color\n * @cssprop --item-active-state-layer-color\n * @cssprop --item-between-space\n * @cssprop --item-container-between-space\n * @cssprop --item-icon-size\n * @cssprop --item-inactive-icon-color\n * @cssprop --item-inactive-label-text-color\n * @cssprop --item-inactive-state-layer-color\n * @cssprop --item-label-text\n * @cssprop --item-label-text-axes\n * @cssprop --item-label-text-tracking\n * @cssprop --motion-duration\n * @cssprop --motion-easing\n */\nexport class NavBarElement extends AriaTablistElement {\n  /** @nocollapse */\n  static override styles: CSSResultOrNative[] = [\n    navBarStyles,\n    css`\n      :host {\n        display: flex;\n        width: 100%;\n      }\n    `,\n  ];\n\n  /** The layout orientation of items ('vertical' or 'horizontal'). */\n  @property({attribute: 'item-layout', reflect: true})\n  itemLayout: NavBarItemLayout = 'vertical';\n\n  /**\n   * The 0-based index of the currently active navigation bar item.\n   * Alias for `selectedTabIndex`.\n   */\n  @property({type: Number, attribute: 'selected-index', noAccessor: true})\n  get selectedIndex(): number {\n    return this.selectedTabIndex;\n  }\n  set selectedIndex(index: number) {\n    this.selectedTabIndex = index;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    adoptStyles(this, navBarStyles);\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('itemLayout')) {\n      this.syncItemsLayout();\n    }\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=\"nav-bar\"\n        class=\"${navBar({\n          itemLayout: this.itemLayout,\n        })}\">\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `;\n  }\n\n  protected override handleSlotChange() {\n    super.handleSlotChange();\n    this.syncItemsLayout();\n  }\n\n  private syncItemsLayout() {\n    for (const tab of this.tabs) {\n      if (tab instanceof NavBarItemElement) {\n        tab.itemLayout = this.itemLayout;\n      } else {\n        tab.setAttribute('item-layout', this.itemLayout);\n      }\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, type PropertyValues } from 'lit';
+import { AriaTabElement } from '../../../aria/tabs/tab.js';
+import { type NavBarItemLayout } from './nav-bar.js';
+/**
+ * A Material Design gBreeze navigation bar item component.
+ *
+ * @slot - Used to display the item's label text.
+ * @slot icon - Used to display the item's icon (`md-gb-icon`).
+ * @slot badge - Used to display a custom badge on the item's icon.
+ * @csspart nav-bar-item - The navigation bar item's presentational container.
+ * @csspart indicator - The active indicator / icon container element.
+ * @csspart label - The label text container element.
+ * @cssstate selected - Whether the navigation bar item is selected.
+ */
+export declare class NavBarItemElement extends AriaTabElement {
+    /** @nocollapse */
+    static styles: CSSResultOrNative[];
+    constructor();
+    get selected(): boolean;
+    set selected(value: boolean);
+    /** Whether the navigation bar item is active. Alias for `selected`. */
+    get active(): boolean;
+    set active(value: boolean);
+    /** Whether the navigation bar item is disabled. */
+    disabled: boolean;
+    /** The layout orientation of the item ('vertical' or 'horizontal'). */
+    itemLayout: NavBarItemLayout;
+    /** Optional label text if not provided via default slot. */
+    label: string;
+    /** Optional badge text (or 'dot' / 'true' for a small dot badge). */
+    badge: string;
+    connectedCallback(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private syncSlottedIcons;
+}

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

@@ -0,0 +1,146 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { AriaTabElement } from '../../../aria/tabs/tab.js';
+import { internals } from '../../../behaviors/element-internals.js';
+import { isFocusable } from '../../../behaviors/focusable.js';
+import { adoptStyles } from '../../styles/adopt-styles.js';
+import focusRingStyles from '../focus/focus-ring.css' with { type: 'css' }; // github-only
+// import {styles as focusRingStyles} from '../focus/focus-ring.cssresult.js'; // google3-only
+import rippleStyles from '../ripple/ripple.css' with { type: 'css' }; // github-only
+// import {styles as rippleStyles} from '../ripple/ripple.cssresult.js'; // google3-only
+import navBarStyles from './nav-bar.css' with { type: 'css' }; // github-only
+// import {styles as navBarStyles} from './nav-bar.cssresult.js'; // google3-only
+import { navBarItem } from './nav-bar.js';
+/**
+ * A Material Design gBreeze navigation bar item component.
+ *
+ * @slot - Used to display the item's label text.
+ * @slot icon - Used to display the item's icon (`md-gb-icon`).
+ * @slot badge - Used to display a custom badge on the item's icon.
+ * @csspart nav-bar-item - The navigation bar item's presentational container.
+ * @csspart indicator - The active indicator / icon container element.
+ * @csspart label - The label text container element.
+ * @cssstate selected - Whether the navigation bar item is selected.
+ */
+export class NavBarItemElement extends AriaTabElement {
+    constructor() {
+        super();
+        /** Whether the navigation bar item is disabled. */
+        this.disabled = false;
+        /** The layout orientation of the item ('vertical' or 'horizontal'). */
+        this.itemLayout = 'vertical';
+        /** Optional label text if not provided via default slot. */
+        this.label = '';
+        /** Optional badge text (or 'dot' / 'true' for a small dot badge). */
+        this.badge = '';
+        this.addEventListener('click', (event) => {
+            if (this.disabled) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+        });
+    }
+    get selected() {
+        return super.selected;
+    }
+    set selected(value) {
+        const oldValue = this.selected;
+        super.selected = value;
+        this.requestUpdate('active', oldValue);
+    }
+    /** Whether the navigation bar item is active. Alias for `selected`. */
+    get active() {
+        return this.selected;
+    }
+    set active(value) {
+        this.selected = value;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        adoptStyles(this, [focusRingStyles, rippleStyles, navBarStyles]);
+        this.syncSlottedIcons();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('disabled')) {
+            this[internals].ariaDisabled = String(this.disabled);
+            this[isFocusable] = !this.disabled;
+        }
+    }
+    render() {
+        const isActive = this.selected;
+        const isDotBadge = this.badge === 'dot' || this.badge === 'true';
+        const hasBadge = Boolean(this.badge);
+        return html `
+      <div
+        part="nav-bar-item"
+        class="${navBarItem({
+            active: isActive,
+            disabled: this.disabled,
+            itemLayout: this.itemLayout,
+        })} ripple-host focus-ring-host"
+        ?disabled=${this.disabled}>
+        <span class="nav-bar-item-content">
+          <span part="indicator" class="nav-bar-item-icon-container">
+            <span class="nav-bar-item-icon">
+              <slot name="icon" @slotchange=${this.syncSlottedIcons}></slot>
+            </span>
+            ${hasBadge
+            ? html `<span
+                  class="nav-bar-item-badge ${isDotBadge
+                ? 'nav-bar-item-badge-dot'
+                : ''}">
+                  ${isDotBadge ? nothing : this.badge}
+                </span>`
+            : html `<slot name="badge"></slot>`}
+          </span>
+          <span part="label" class="nav-bar-item-label">
+            <slot @slotchange=${this.syncSlottedIcons}>${this.label}</slot>
+          </span>
+        </span>
+      </div>
+    `;
+    }
+    syncSlottedIcons() {
+        const icons = this.querySelectorAll('md-gb-icon:not([slot])');
+        for (const icon of Array.from(icons)) {
+            icon.setAttribute('slot', 'icon');
+        }
+    }
+}
+/** @nocollapse */
+NavBarItemElement.styles = [
+    focusRingStyles,
+    rippleStyles,
+    navBarStyles,
+    css `
+      :host {
+        display: flex;
+        flex: 1 1 0;
+        min-width: 48px;
+        outline: none;
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean, reflect: true, noAccessor: true })
+], NavBarItemElement.prototype, "active", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NavBarItemElement.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: 'item-layout', reflect: true })
+], NavBarItemElement.prototype, "itemLayout", void 0);
+__decorate([
+    property()
+], NavBarItemElement.prototype, "label", void 0);
+__decorate([
+    property()
+], NavBarItemElement.prototype, "badge", void 0);
+//# sourceMappingURL=nav-bar-item-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-bar-item-element.js","sourceRoot":"","sources":["nav-bar-item-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,OAAO,EAAsB,MAAM,KAAK,CAAC;AAC/E,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAC,SAAS,EAAC,MAAM,yCAAyC,CAAC;AAClE,OAAO,EAAC,WAAW,EAAC,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAC,WAAW,EAAC,MAAM,8BAA8B,CAAC;AAEzD,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,8FAA8F;AAC9F,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,wFAAwF;AACxF,OAAO,YAAY,MAAM,eAAe,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAC3E,iFAAiF;AAEjF,OAAO,EAAC,UAAU,EAAwB,MAAM,cAAc,CAAC;AAE/D;;;;;;;;;;GAUG;AACH,MAAM,OAAO,iBAAkB,SAAQ,cAAc;IAgBnD;QACE,KAAK,EAAE,CAAC;QA2BV,mDAAmD;QACT,aAAQ,GAAG,KAAK,CAAC;QAE3D,uEAAuE;QAEvE,eAAU,GAAqB,UAAU,CAAC;QAE1C,4DAA4D;QAChD,UAAK,GAAG,EAAE,CAAC;QAEvB,qEAAqE;QACzD,UAAK,GAAG,EAAE,CAAC;QArCrB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAY,EAAE,EAAE;YAC9C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACnC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAa,QAAQ;QACnB,OAAO,KAAK,CAAC,QAAQ,CAAC;IACxB,CAAC;IACD,IAAa,QAAQ,CAAC,KAAc;QAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IACzC,CAAC;IAED,uEAAuE;IAEvE,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IACD,IAAI,MAAM,CAAC,KAAc;QACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAeQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,WAAW,CAAC,IAAI,EAAE,CAAC,eAAe,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC;QACjE,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEkB,OAAO,CAAC,iBAAuC;QAChE,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,SAAS,CAAC,CAAC,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACrD,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QACrC,CAAC;IACH,CAAC;IAEkB,MAAM;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC;QACjE,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAErC,OAAO,IAAI,CAAA;;;iBAGE,UAAU,CAAC;YAClB,MAAM,EAAE,QAAQ;YAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B,CAAC;oBACU,IAAI,CAAC,QAAQ;;;;8CAIa,IAAI,CAAC,gBAAgB;;cAErD,QAAQ;YACR,CAAC,CAAC,IAAI,CAAA;8CAC0B,UAAU;gBACpC,CAAC,CAAC,wBAAwB;gBAC1B,CAAC,CAAC,EAAE;oBACJ,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;wBAC7B;YACV,CAAC,CAAC,IAAI,CAAA,4BAA4B;;;gCAGhB,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,KAAK;;;;KAI9D,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;QAC9D,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACrC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;;AA/GD,kBAAkB;AACF,wBAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,YAAY;IACZ,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAuBF;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;+CAG1D;AAMyC;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;mDAAkB;AAI3D;IADC,QAAQ,CAAC,EAAC,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qDACV;AAG9B;IAAX,QAAQ,EAAE;gDAAY;AAGX;IAAX,QAAQ,EAAE;gDAAY","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, nothing, type PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {AriaTabElement} from '../../../aria/tabs/tab.js';\nimport {internals} from '../../../behaviors/element-internals.js';\nimport {isFocusable} from '../../../behaviors/focusable.js';\nimport {adoptStyles} from '../../styles/adopt-styles.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import {styles as focusRingStyles} from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import {styles as rippleStyles} from '../ripple/ripple.cssresult.js'; // google3-only\nimport navBarStyles from './nav-bar.css' with {type: 'css'}; // github-only\n// import {styles as navBarStyles} from './nav-bar.cssresult.js'; // google3-only\n\nimport {navBarItem, type NavBarItemLayout} from './nav-bar.js';\n\n/**\n * A Material Design gBreeze navigation bar item component.\n *\n * @slot - Used to display the item's label text.\n * @slot icon - Used to display the item's icon (`md-gb-icon`).\n * @slot badge - Used to display a custom badge on the item's icon.\n * @csspart nav-bar-item - The navigation bar item's presentational container.\n * @csspart indicator - The active indicator / icon container element.\n * @csspart label - The label text container element.\n * @cssstate selected - Whether the navigation bar item is selected.\n */\nexport class NavBarItemElement extends AriaTabElement {\n  /** @nocollapse */\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    navBarStyles,\n    css`\n      :host {\n        display: flex;\n        flex: 1 1 0;\n        min-width: 48px;\n        outline: none;\n      }\n    `,\n  ];\n\n  constructor() {\n    super();\n    this.addEventListener('click', (event: Event) => {\n      if (this.disabled) {\n        event.preventDefault();\n        event.stopImmediatePropagation();\n      }\n    });\n  }\n\n  override get selected(): boolean {\n    return super.selected;\n  }\n  override set selected(value: boolean) {\n    const oldValue = this.selected;\n    super.selected = value;\n    this.requestUpdate('active', oldValue);\n  }\n\n  /** Whether the navigation bar item is active. Alias for `selected`. */\n  @property({type: Boolean, reflect: true, noAccessor: true})\n  get active(): boolean {\n    return this.selected;\n  }\n  set active(value: boolean) {\n    this.selected = value;\n  }\n\n  /** Whether the navigation bar item is disabled. */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /** The layout orientation of the item ('vertical' or 'horizontal'). */\n  @property({attribute: 'item-layout', reflect: true})\n  itemLayout: NavBarItemLayout = 'vertical';\n\n  /** Optional label text if not provided via default slot. */\n  @property() label = '';\n\n  /** Optional badge text (or 'dot' / 'true' for a small dot badge). */\n  @property() badge = '';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    adoptStyles(this, [focusRingStyles, rippleStyles, navBarStyles]);\n    this.syncSlottedIcons();\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('disabled')) {\n      this[internals].ariaDisabled = String(this.disabled);\n      this[isFocusable] = !this.disabled;\n    }\n  }\n\n  protected override render() {\n    const isActive = this.selected;\n    const isDotBadge = this.badge === 'dot' || this.badge === 'true';\n    const hasBadge = Boolean(this.badge);\n\n    return html`\n      <div\n        part=\"nav-bar-item\"\n        class=\"${navBarItem({\n          active: isActive,\n          disabled: this.disabled,\n          itemLayout: this.itemLayout,\n        })} ripple-host focus-ring-host\"\n        ?disabled=${this.disabled}>\n        <span class=\"nav-bar-item-content\">\n          <span part=\"indicator\" class=\"nav-bar-item-icon-container\">\n            <span class=\"nav-bar-item-icon\">\n              <slot name=\"icon\" @slotchange=${this.syncSlottedIcons}></slot>\n            </span>\n            ${hasBadge\n              ? html`<span\n                  class=\"nav-bar-item-badge ${isDotBadge\n                    ? 'nav-bar-item-badge-dot'\n                    : ''}\">\n                  ${isDotBadge ? nothing : this.badge}\n                </span>`\n              : html`<slot name=\"badge\"></slot>`}\n          </span>\n          <span part=\"label\" class=\"nav-bar-item-label\">\n            <slot @slotchange=${this.syncSlottedIcons}>${this.label}</slot>\n          </span>\n        </span>\n      </div>\n    `;\n  }\n\n  private syncSlottedIcons() {\n    const icons = this.querySelectorAll('md-gb-icon:not([slot])');\n    for (const icon of Array.from(icons)) {\n      icon.setAttribute('slot', 'icon');\n    }\n  }\n}\n"]}

package/labs/gb/components/navbar/nav-bar.css

@@ -0,0 +1,4 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.nav-bar{:host(md-gb-nav-bar){--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2);--container-height: 64px;--container-shadow-color: var(--md-sys-color-shadow);--container-shape: var(--md-sys-shape-corner-none);--item-active-icon-color: var(--md-sys-color-on-secondary-container);--item-active-indicator-color: var(--md-sys-color-secondary-container);--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-leading-space: 16px;--item-active-indicator-shape: var(--md-sys-shape-corner-full);--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-active-state-layer-color: var(--md-sys-color-on-secondary-container);--item-between-space: var(--md-sys-space-0);--item-container-between-space: 6px;--item-icon-size: 24px;--item-inactive-icon-color: var(--md-sys-color-on-surface-variant);--item-inactive-label-text-color: var(--md-sys-color-on-surface-variant);--item-inactive-state-layer-color: var(--md-sys-color-on-secondary-container);--item-label-text: var(--md-sys-typescale-label-md);--item-label-text-axes: var(--md-sys-typescale-label-md-axes);--item-label-text-tracking: var(--md-sys-typescale-label-md-tracking);--motion-duration: var(--md-sys-motion-duration-short4);--motion-easing: var(--md-sys-motion-easing-emphasized);--nav-bar: true;display:flex;width:100%}:host(md-gb-nav-bar[item-layout=horizontal]){--item-active-indicator-height: 40px;--item-active-indicator-icon-label-space: 8px;--item-active-indicator-leading-space: 16px;--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: auto;--item-active-label-text-color: var(--md-sys-color-on-secondary-container)}:host(md-gb-nav-bar[item-layout=vertical]){--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-container-between-space: 6px}:host(md-gb-nav-bar-item){--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2);--container-height: 64px;--container-shadow-color: var(--md-sys-color-shadow);--container-shape: var(--md-sys-shape-corner-none);--item-active-icon-color: var(--md-sys-color-on-secondary-container);--item-active-indicator-color: var(--md-sys-color-secondary-container);--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-leading-space: 16px;--item-active-indicator-shape: var(--md-sys-shape-corner-full);--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-active-state-layer-color: var(--md-sys-color-on-secondary-container);--item-between-space: var(--md-sys-space-0);--item-container-between-space: 6px;--item-icon-size: 24px;--item-inactive-icon-color: var(--md-sys-color-on-surface-variant);--item-inactive-label-text-color: var(--md-sys-color-on-surface-variant);--item-inactive-state-layer-color: var(--md-sys-color-on-secondary-container);--item-label-text: var(--md-sys-typescale-label-md);--item-label-text-axes: var(--md-sys-typescale-label-md-axes);--item-label-text-tracking: var(--md-sys-typescale-label-md-tracking);--motion-duration: var(--md-sys-motion-duration-short4);--motion-easing: var(--md-sys-motion-easing-emphasized);display:flex;flex:1 1 0;min-width:48px;outline:none}:host(md-gb-nav-bar-item[item-layout=horizontal]){--item-active-indicator-height: 40px;--item-active-indicator-icon-label-space: 8px;--item-active-indicator-leading-space: 16px;--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: auto;--item-active-label-text-color: var(--md-sys-color-on-secondary-container)}:host(md-gb-nav-bar-item[item-layout=vertical]){--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-container-between-space: 6px}md-gb-nav-bar{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2);--container-height: 64px;--container-shadow-color: var(--md-sys-color-shadow);--container-shape: var(--md-sys-shape-corner-none);--item-active-icon-color: var(--md-sys-color-on-secondary-container);--item-active-indicator-color: var(--md-sys-color-secondary-container);--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-leading-space: 16px;--item-active-indicator-shape: var(--md-sys-shape-corner-full);--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-active-state-layer-color: var(--md-sys-color-on-secondary-container);--item-between-space: var(--md-sys-space-0);--item-container-between-space: 6px;--item-icon-size: 24px;--item-inactive-icon-color: var(--md-sys-color-on-surface-variant);--item-inactive-label-text-color: var(--md-sys-color-on-surface-variant);--item-inactive-state-layer-color: var(--md-sys-color-on-secondary-container);--item-label-text: var(--md-sys-typescale-label-md);--item-label-text-axes: var(--md-sys-typescale-label-md-axes);--item-label-text-tracking: var(--md-sys-typescale-label-md-tracking);--motion-duration: var(--md-sys-motion-duration-short4);--motion-easing: var(--md-sys-motion-easing-emphasized);--nav-bar: true;display:flex;width:100%}md-gb-nav-bar[item-layout=horizontal]{--item-active-indicator-height: 40px;--item-active-indicator-icon-label-space: 8px;--item-active-indicator-leading-space: 16px;--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: auto;--item-active-label-text-color: var(--md-sys-color-on-secondary-container)}md-gb-nav-bar[item-layout=vertical]{--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-container-between-space: 6px}.nav-bar{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2);--container-height: 64px;--container-shadow-color: var(--md-sys-color-shadow);--container-shape: var(--md-sys-shape-corner-none);--item-active-icon-color: var(--md-sys-color-on-secondary-container);--item-active-indicator-color: var(--md-sys-color-secondary-container);--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-leading-space: 16px;--item-active-indicator-shape: var(--md-sys-shape-corner-full);--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-active-state-layer-color: var(--md-sys-color-on-secondary-container);--item-between-space: var(--md-sys-space-0);--item-container-between-space: 6px;--item-icon-size: 24px;--item-inactive-icon-color: var(--md-sys-color-on-surface-variant);--item-inactive-label-text-color: var(--md-sys-color-on-surface-variant);--item-inactive-state-layer-color: var(--md-sys-color-on-secondary-container);--item-label-text: var(--md-sys-typescale-label-md);--item-label-text-axes: var(--md-sys-typescale-label-md-axes);--item-label-text-tracking: var(--md-sys-typescale-label-md-tracking);--motion-duration: var(--md-sys-motion-duration-short4);--motion-easing: var(--md-sys-motion-easing-emphasized);--md-elevation-shadow-color: var(--container-shadow-color);--nav-bar: true;align-items:stretch;background-color:var(--container-color);border:none;border-radius:var(--container-shape);box-shadow:var(--container-elevation);box-sizing:border-box;display:flex;flex-direction:row;gap:var(--item-between-space);height:var(--container-height);isolation:isolate;justify-content:space-around;margin:0;padding:0;position:relative;transition:all var(--motion-duration) var(--motion-easing);user-select:none;width:100%}.nav-bar>:focus-within,.nav-bar ::slotted(:focus-within){z-index:1}.nav-bar.nav-bar-horizontal{--item-active-indicator-height: 40px;--item-active-indicator-icon-label-space: 8px;--item-active-indicator-leading-space: 16px;--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: auto;--item-active-label-text-color: var(--md-sys-color-on-secondary-container)}.nav-bar.nav-bar-vertical{--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-container-between-space: 6px}.nav-bar-item{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2);--container-height: 64px;--container-shadow-color: var(--md-sys-color-shadow);--container-shape: var(--md-sys-shape-corner-none);--item-active-icon-color: var(--md-sys-color-on-secondary-container);--item-active-indicator-color: var(--md-sys-color-secondary-container);--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-leading-space: 16px;--item-active-indicator-shape: var(--md-sys-shape-corner-full);--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-active-state-layer-color: var(--md-sys-color-on-secondary-container);--item-between-space: var(--md-sys-space-0);--item-container-between-space: 6px;--item-icon-size: 24px;--item-inactive-icon-color: var(--md-sys-color-on-surface-variant);--item-inactive-label-text-color: var(--md-sys-color-on-surface-variant);--item-inactive-state-layer-color: var(--md-sys-color-on-secondary-container);--item-label-text: var(--md-sys-typescale-label-md);--item-label-text-axes: var(--md-sys-typescale-label-md-axes);--item-label-text-tracking: var(--md-sys-typescale-label-md-tracking);--motion-duration: var(--md-sys-motion-duration-short4);--motion-easing: var(--md-sys-motion-easing-emphasized);--md-icon-color: var(--item-inactive-icon-color);--md-icon-fill: 0;--md-icon-size: var(--item-icon-size);--ripple-color: var(--item-inactive-state-layer-color);align-items:center;appearance:none;background:rgba(0,0,0,0);background-image:none;border:none;border-radius:var(--md-sys-space-100);box-sizing:border-box;color:var(--item-inactive-label-text-color);cursor:pointer;display:flex;flex:1 1 0;flex-direction:column;font:var(--item-label-text);font-variation-settings:var(--item-label-text-axes);height:100%;justify-content:center;letter-spacing:var(--item-label-text-tracking);margin:0;min-width:48px;padding:0;position:relative;text-decoration:none;transition:all var(--motion-duration) var(--motion-easing);user-select:none;width:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}.nav-bar-item:disabled,.nav-bar-item[disabled],.nav-bar-item.disabled{cursor:default;opacity:.38;pointer-events:none}.nav-bar-item-content{align-items:center;border-radius:var(--item-active-indicator-shape);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--item-active-indicator-icon-label-space);justify-content:center;padding-block:var(--item-container-between-space);position:relative;transition:all var(--motion-duration) var(--motion-easing)}.nav-bar-item-icon-container{align-items:center;background-color:rgba(0,0,0,0);border-radius:var(--item-active-indicator-shape);color:var(--item-inactive-icon-color);display:flex;height:var(--item-active-indicator-height);isolation:isolate;justify-content:center;position:relative;transition:all var(--motion-duration) var(--motion-easing);width:var(--item-active-indicator-width)}.nav-bar-item-icon-container::before{background-color:var(--item-active-indicator-color);border-radius:var(--item-active-indicator-shape);content:"";inset:0;opacity:0;position:absolute;transform:scaleX(0.5);transition:all var(--motion-duration) var(--motion-easing);z-index:-2}.nav-bar-item-icon{align-items:center;display:inline-flex;height:var(--item-icon-size);justify-content:center;position:relative;transition:all var(--motion-duration) var(--motion-easing);width:var(--item-icon-size)}.nav-bar-item-label{color:var(--item-inactive-label-text-color);font:var(--item-label-text);font-variation-settings:var(--item-label-text-axes);letter-spacing:var(--item-label-text-tracking);overflow:hidden;text-align:center;text-overflow:ellipsis;transition:all var(--motion-duration) var(--motion-easing);white-space:nowrap}.nav-bar-item-badge{align-items:center;background-color:var(--md-sys-color-error);border-radius:var(--md-sys-shape-corner-full);box-sizing:border-box;color:var(--md-sys-color-on-error);display:inline-flex;font:var(--md-sys-typescale-label-sm);height:16px;inset-block-start:-4px;inset-inline-start:calc(50% + 2px);justify-content:center;min-width:16px;padding-inline:4px;pointer-events:none;position:absolute;transition:all var(--motion-duration) var(--motion-easing);z-index:2}.nav-bar-item-badge-dot{height:6px;inset-block-start:0;inset-inline-start:calc(50% + 6px);min-width:6px;padding-inline:0;width:6px}.nav-bar-item:is(.nav-bar-item-active,[aria-selected=true]){--md-icon-color: var(--item-active-icon-color);--md-icon-fill: 1;--ripple-color: var(--item-active-state-layer-color);color:var(--item-active-label-text-color)}.nav-bar-item:is(.nav-bar-item-active,[aria-selected=true]) .nav-bar-item-icon-container{color:var(--item-active-icon-color)}.nav-bar-item:is(.nav-bar-item-active,[aria-selected=true]) .nav-bar-item-icon-container::before{opacity:1;transform:scaleX(1)}.nav-bar-item:is(.nav-bar-item-active,[aria-selected=true]) .nav-bar-item-label{color:var(--item-active-label-text-color)}.nav-bar-item-horizontal{--item-active-indicator-height: 40px;--item-active-indicator-icon-label-space: 8px;--item-active-indicator-leading-space: 16px;--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: auto;--item-active-label-text-color: var(--md-sys-color-on-secondary-container)}.nav-bar-item-horizontal .nav-bar-item-content{display:inline-flex;flex-direction:row;gap:var(--item-active-indicator-icon-label-space);height:var(--item-active-indicator-height);isolation:isolate;padding-block:0;padding-inline:var(--item-active-indicator-leading-space) var(--item-active-indicator-trailing-space)}.nav-bar-item-horizontal .nav-bar-item-content::before{background-color:var(--item-active-indicator-color);border-radius:var(--item-active-indicator-shape);content:"";inset:0;opacity:0;position:absolute;transform:scaleX(0.6);transition:all var(--motion-duration) var(--motion-easing);z-index:-2}.nav-bar-item-horizontal .nav-bar-item-icon-container{height:var(--item-icon-size);width:var(--item-icon-size)}.nav-bar-item-horizontal .nav-bar-item-icon-container::before{display:none}.nav-bar-item-horizontal:is(.nav-bar-item-active,[aria-selected=true]) .nav-bar-item-content::before{opacity:1;transform:scaleX(1)}}/*# sourceMappingURL=nav-bar.css.map */

package/labs/gb/components/navbar/nav-bar.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["nav-bar.scss","_nav-bar-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDAEA,uBACE,qBCLA,yDACA,wDACA,yBACA,qDACA,mDACA,qEACA,uEACA,qCACA,8CACA,4CACA,+DACA,6CACA,oCACA,8DACA,4EACA,4CACA,oCACA,uBACA,mEACA,yEACA,8EACA,oDACA,8DACA,sEACA,wDACA,wDDjBE,gBACA,aACA,WAGF,6CCyBA,qCACA,8CACA,4CACA,6CACA,oCAEA,2ED3BA,2CCaA,qCACA,8CACA,oCACA,8DACA,oCDbA,0BCrBA,yDACA,wDACA,yBACA,qDACA,mDACA,qEACA,uEACA,qCACA,8CACA,4CACA,+DACA,6CACA,oCACA,8DACA,4EACA,4CACA,oCACA,uBACA,mEACA,yEACA,8EACA,oDACA,8DACA,sEACA,wDACA,wDDDE,aACA,WACA,eACA,aAGF,kDCQA,qCACA,8CACA,4CACA,6CACA,oCAEA,2EDVA,gDCJA,qCACA,8CACA,oCACA,8DACA,oCDIA,cCtCA,yDACA,wDACA,yBACA,qDACA,mDACA,qEACA,uEACA,qCACA,8CACA,4CACA,+DACA,6CACA,oCACA,8DACA,4EACA,4CACA,oCACA,uBACA,mEACA,yEACA,8EACA,oDACA,8DACA,sEACA,wDACA,wDDgBE,gBACA,aACA,WAEA,sCCPF,qCACA,8CACA,4CACA,6CACA,oCAEA,2EDKE,oCCnBF,qCACA,8CACA,oCACA,8DACA,oCDoBA,SCtDA,yDACA,wDACA,yBACA,qDACA,mDACA,qEACA,uEACA,qCACA,8CACA,4CACA,+DACA,6CACA,oCACA,8DACA,4EACA,4CACA,oCACA,uBACA,mEACA,yEACA,8EACA,oDACA,8DACA,sEACA,wDACA,wDDgCE,2DACA,gBACA,oBACA,wCACA,YACA,qCACA,sCACA,sBACA,aACA,mBACA,8BACA,+BACA,kBACA,6BACA,SACA,UACA,kBACA,2DACA,iBACA,WAEA,yDAEE,UAGF,4BC7CF,qCACA,8CACA,4CACA,6CACA,oCAEA,2ED2CE,0BCzDF,qCACA,8CACA,oCACA,8DACA,oCD0DA,cC5FA,yDACA,wDACA,yBACA,qDACA,mDACA,qEACA,uEACA,qCACA,8CACA,4CACA,+DACA,6CACA,oCACA,8DACA,4EACA,4CACA,oCACA,uBACA,mEACA,yEACA,8EACA,oDACA,8DACA,sEACA,wDACA,wDDsEE,iDACA,kBACA,sCACA,uDACA,mBACA,gBACA,yBACA,sBACA,YACA,sCACA,sBACA,4CACA,eACA,aACA,WACA,sBACA,4BACA,oDACA,YACA,uBACA,+CACA,SACA,eACA,UACA,kBACA,qBACA,2DACA,iBACA,WACA,0CAEA,sEAGE,eACA,YACA,oBAIJ,sBACE,mBACA,iDACA,sBACA,aACA,sBACA,kDACA,uBACA,kDACA,kBACA,2DAGF,6BACE,mBACA,+BACA,iDACA,sCACA,aACA,2CACA,kBACA,uBACA,kBACA,2DACA,yCAEA,qCACE,oDACA,iDACA,WACA,QACA,UACA,kBACA,sBACA,2DACA,WAIJ,mBACE,mBACA,oBACA,6BACA,uBACA,kBACA,2DACA,4BAGF,oBACE,4CACA,4BACA,oDACA,+CACA,gBACA,kBACA,uBACA,2DACA,mBAGF,oBACE,mBACA,2CACA,8CACA,sBACA,mCACA,oBACA,sCACA,YACA,uBACA,mCACA,uBACA,eACA,mBACA,oBACA,kBACA,2DACA,UAGF,wBACE,WACA,oBACA,mCACA,cACA,iBACA,UAGF,4DACE,+CACA,kBACA,qDACA,0CAEA,yFACE,oCAEA,iGACE,UACA,oBAIJ,gFACE,0CAIJ,yBC/MA,qCACA,8CACA,4CACA,6CACA,oCAEA,2ED4ME,+CACE,oBACA,mBACA,kDACA,2CACA,kBACA,gBACA,sGAGA,uDACE,oDACA,iDACA,WACA,QACA,UACA,kBACA,sBACA,2DACA,WAIJ,sDACE,6BACA,4BAEA,8DACE,aAKF,qGACE,UACA","file":"nav-bar.css"}

package/labs/gb/components/navbar/nav-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/navbar/nav-bar.cssresult.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/components/navbar/nav-bar.css.
+import { css } from 'lit';
+export const styles = css `/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.nav-bar{:host(md-gb-nav-bar){--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2);--container-height: 64px;--container-shadow-color: var(--md-sys-color-shadow);--container-shape: var(--md-sys-shape-corner-none);--item-active-icon-color: var(--md-sys-color-on-secondary-container);--item-active-indicator-color: var(--md-sys-color-secondary-container);--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-leading-space: 16px;--item-active-indicator-shape: var(--md-sys-shape-corner-full);--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-active-state-layer-color: var(--md-sys-color-on-secondary-container);--item-between-space: var(--md-sys-space-0);--item-container-between-space: 6px;--item-icon-size: 24px;--item-inactive-icon-color: var(--md-sys-color-on-surface-variant);--item-inactive-label-text-color: var(--md-sys-color-on-surface-variant);--item-inactive-state-layer-color: var(--md-sys-color-on-secondary-container);--item-label-text: var(--md-sys-typescale-label-md);--item-label-text-axes: var(--md-sys-typescale-label-md-axes);--item-label-text-tracking: var(--md-sys-typescale-label-md-tracking);--motion-duration: var(--md-sys-motion-duration-short4);--motion-easing: var(--md-sys-motion-easing-emphasized);--nav-bar: true;display:flex;width:100%}:host(md-gb-nav-bar[item-layout=horizontal]){--item-active-indicator-height: 40px;--item-active-indicator-icon-label-space: 8px;--item-active-indicator-leading-space: 16px;--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: auto;--item-active-label-text-color: var(--md-sys-color-on-secondary-container)}:host(md-gb-nav-bar[item-layout=vertical]){--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-container-between-space: 6px}:host(md-gb-nav-bar-item){--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2);--container-height: 64px;--container-shadow-color: var(--md-sys-color-shadow);--container-shape: var(--md-sys-shape-corner-none);--item-active-icon-color: var(--md-sys-color-on-secondary-container);--item-active-indicator-color: var(--md-sys-color-secondary-container);--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-leading-space: 16px;--item-active-indicator-shape: var(--md-sys-shape-corner-full);--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-active-state-layer-color: var(--md-sys-color-on-secondary-container);--item-between-space: var(--md-sys-space-0);--item-container-between-space: 6px;--item-icon-size: 24px;--item-inactive-icon-color: var(--md-sys-color-on-surface-variant);--item-inactive-label-text-color: var(--md-sys-color-on-surface-variant);--item-inactive-state-layer-color: var(--md-sys-color-on-secondary-container);--item-label-text: var(--md-sys-typescale-label-md);--item-label-text-axes: var(--md-sys-typescale-label-md-axes);--item-label-text-tracking: var(--md-sys-typescale-label-md-tracking);--motion-duration: var(--md-sys-motion-duration-short4);--motion-easing: var(--md-sys-motion-easing-emphasized);display:flex;flex:1 1 0;min-width:48px;outline:none}:host(md-gb-nav-bar-item[item-layout=horizontal]){--item-active-indicator-height: 40px;--item-active-indicator-icon-label-space: 8px;--item-active-indicator-leading-space: 16px;--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: auto;--item-active-label-text-color: var(--md-sys-color-on-secondary-container)}:host(md-gb-nav-bar-item[item-layout=vertical]){--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-container-between-space: 6px}md-gb-nav-bar{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2);--container-height: 64px;--container-shadow-color: var(--md-sys-color-shadow);--container-shape: var(--md-sys-shape-corner-none);--item-active-icon-color: var(--md-sys-color-on-secondary-container);--item-active-indicator-color: var(--md-sys-color-secondary-container);--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-leading-space: 16px;--item-active-indicator-shape: var(--md-sys-shape-corner-full);--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-active-state-layer-color: var(--md-sys-color-on-secondary-container);--item-between-space: var(--md-sys-space-0);--item-container-between-space: 6px;--item-icon-size: 24px;--item-inactive-icon-color: var(--md-sys-color-on-surface-variant);--item-inactive-label-text-color: var(--md-sys-color-on-surface-variant);--item-inactive-state-layer-color: var(--md-sys-color-on-secondary-container);--item-label-text: var(--md-sys-typescale-label-md);--item-label-text-axes: var(--md-sys-typescale-label-md-axes);--item-label-text-tracking: var(--md-sys-typescale-label-md-tracking);--motion-duration: var(--md-sys-motion-duration-short4);--motion-easing: var(--md-sys-motion-easing-emphasized);--nav-bar: true;display:flex;width:100%}md-gb-nav-bar[item-layout=horizontal]{--item-active-indicator-height: 40px;--item-active-indicator-icon-label-space: 8px;--item-active-indicator-leading-space: 16px;--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: auto;--item-active-label-text-color: var(--md-sys-color-on-secondary-container)}md-gb-nav-bar[item-layout=vertical]{--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-container-between-space: 6px}.nav-bar{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2);--container-height: 64px;--container-shadow-color: var(--md-sys-color-shadow);--container-shape: var(--md-sys-shape-corner-none);--item-active-icon-color: var(--md-sys-color-on-secondary-container);--item-active-indicator-color: var(--md-sys-color-secondary-container);--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-leading-space: 16px;--item-active-indicator-shape: var(--md-sys-shape-corner-full);--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-active-state-layer-color: var(--md-sys-color-on-secondary-container);--item-between-space: var(--md-sys-space-0);--item-container-between-space: 6px;--item-icon-size: 24px;--item-inactive-icon-color: var(--md-sys-color-on-surface-variant);--item-inactive-label-text-color: var(--md-sys-color-on-surface-variant);--item-inactive-state-layer-color: var(--md-sys-color-on-secondary-container);--item-label-text: var(--md-sys-typescale-label-md);--item-label-text-axes: var(--md-sys-typescale-label-md-axes);--item-label-text-tracking: var(--md-sys-typescale-label-md-tracking);--motion-duration: var(--md-sys-motion-duration-short4);--motion-easing: var(--md-sys-motion-easing-emphasized);--md-elevation-shadow-color: var(--container-shadow-color);--nav-bar: true;align-items:stretch;background-color:var(--container-color);border:none;border-radius:var(--container-shape);box-shadow:var(--container-elevation);box-sizing:border-box;display:flex;flex-direction:row;gap:var(--item-between-space);height:var(--container-height);isolation:isolate;justify-content:space-around;margin:0;padding:0;position:relative;transition:all var(--motion-duration) var(--motion-easing);user-select:none;width:100%}.nav-bar>:focus-within,.nav-bar ::slotted(:focus-within){z-index:1}.nav-bar.nav-bar-horizontal{--item-active-indicator-height: 40px;--item-active-indicator-icon-label-space: 8px;--item-active-indicator-leading-space: 16px;--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: auto;--item-active-label-text-color: var(--md-sys-color-on-secondary-container)}.nav-bar.nav-bar-vertical{--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-container-between-space: 6px}.nav-bar-item{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2);--container-height: 64px;--container-shadow-color: var(--md-sys-color-shadow);--container-shape: var(--md-sys-shape-corner-none);--item-active-icon-color: var(--md-sys-color-on-secondary-container);--item-active-indicator-color: var(--md-sys-color-secondary-container);--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-leading-space: 16px;--item-active-indicator-shape: var(--md-sys-shape-corner-full);--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-active-state-layer-color: var(--md-sys-color-on-secondary-container);--item-between-space: var(--md-sys-space-0);--item-container-between-space: 6px;--item-icon-size: 24px;--item-inactive-icon-color: var(--md-sys-color-on-surface-variant);--item-inactive-label-text-color: var(--md-sys-color-on-surface-variant);--item-inactive-state-layer-color: var(--md-sys-color-on-secondary-container);--item-label-text: var(--md-sys-typescale-label-md);--item-label-text-axes: var(--md-sys-typescale-label-md-axes);--item-label-text-tracking: var(--md-sys-typescale-label-md-tracking);--motion-duration: var(--md-sys-motion-duration-short4);--motion-easing: var(--md-sys-motion-easing-emphasized);--md-icon-color: var(--item-inactive-icon-color);--md-icon-fill: 0;--md-icon-size: var(--item-icon-size);--ripple-color: var(--item-inactive-state-layer-color);align-items:center;appearance:none;background:rgba(0,0,0,0);background-image:none;border:none;border-radius:var(--md-sys-space-100);box-sizing:border-box;color:var(--item-inactive-label-text-color);cursor:pointer;display:flex;flex:1 1 0;flex-direction:column;font:var(--item-label-text);font-variation-settings:var(--item-label-text-axes);height:100%;justify-content:center;letter-spacing:var(--item-label-text-tracking);margin:0;min-width:48px;padding:0;position:relative;text-decoration:none;transition:all var(--motion-duration) var(--motion-easing);user-select:none;width:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}.nav-bar-item:disabled,.nav-bar-item[disabled],.nav-bar-item.disabled{cursor:default;opacity:.38;pointer-events:none}.nav-bar-item-content{align-items:center;border-radius:var(--item-active-indicator-shape);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--item-active-indicator-icon-label-space);justify-content:center;padding-block:var(--item-container-between-space);position:relative;transition:all var(--motion-duration) var(--motion-easing)}.nav-bar-item-icon-container{align-items:center;background-color:rgba(0,0,0,0);border-radius:var(--item-active-indicator-shape);color:var(--item-inactive-icon-color);display:flex;height:var(--item-active-indicator-height);isolation:isolate;justify-content:center;position:relative;transition:all var(--motion-duration) var(--motion-easing);width:var(--item-active-indicator-width)}.nav-bar-item-icon-container::before{background-color:var(--item-active-indicator-color);border-radius:var(--item-active-indicator-shape);content:"";inset:0;opacity:0;position:absolute;transform:scaleX(0.5);transition:all var(--motion-duration) var(--motion-easing);z-index:-2}.nav-bar-item-icon{align-items:center;display:inline-flex;height:var(--item-icon-size);justify-content:center;position:relative;transition:all var(--motion-duration) var(--motion-easing);width:var(--item-icon-size)}.nav-bar-item-label{color:var(--item-inactive-label-text-color);font:var(--item-label-text);font-variation-settings:var(--item-label-text-axes);letter-spacing:var(--item-label-text-tracking);overflow:hidden;text-align:center;text-overflow:ellipsis;transition:all var(--motion-duration) var(--motion-easing);white-space:nowrap}.nav-bar-item-badge{align-items:center;background-color:var(--md-sys-color-error);border-radius:var(--md-sys-shape-corner-full);box-sizing:border-box;color:var(--md-sys-color-on-error);display:inline-flex;font:var(--md-sys-typescale-label-sm);height:16px;inset-block-start:-4px;inset-inline-start:calc(50% + 2px);justify-content:center;min-width:16px;padding-inline:4px;pointer-events:none;position:absolute;transition:all var(--motion-duration) var(--motion-easing);z-index:2}.nav-bar-item-badge-dot{height:6px;inset-block-start:0;inset-inline-start:calc(50% + 6px);min-width:6px;padding-inline:0;width:6px}.nav-bar-item:is(.nav-bar-item-active,[aria-selected=true]){--md-icon-color: var(--item-active-icon-color);--md-icon-fill: 1;--ripple-color: var(--item-active-state-layer-color);color:var(--item-active-label-text-color)}.nav-bar-item:is(.nav-bar-item-active,[aria-selected=true]) .nav-bar-item-icon-container{color:var(--item-active-icon-color)}.nav-bar-item:is(.nav-bar-item-active,[aria-selected=true]) .nav-bar-item-icon-container::before{opacity:1;transform:scaleX(1)}.nav-bar-item:is(.nav-bar-item-active,[aria-selected=true]) .nav-bar-item-label{color:var(--item-active-label-text-color)}.nav-bar-item-horizontal{--item-active-indicator-height: 40px;--item-active-indicator-icon-label-space: 8px;--item-active-indicator-leading-space: 16px;--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: auto;--item-active-label-text-color: var(--md-sys-color-on-secondary-container)}.nav-bar-item-horizontal .nav-bar-item-content{display:inline-flex;flex-direction:row;gap:var(--item-active-indicator-icon-label-space);height:var(--item-active-indicator-height);isolation:isolate;padding-block:0;padding-inline:var(--item-active-indicator-leading-space) var(--item-active-indicator-trailing-space)}.nav-bar-item-horizontal .nav-bar-item-content::before{background-color:var(--item-active-indicator-color);border-radius:var(--item-active-indicator-shape);content:"";inset:0;opacity:0;position:absolute;transform:scaleX(0.6);transition:all var(--motion-duration) var(--motion-easing);z-index:-2}.nav-bar-item-horizontal .nav-bar-item-icon-container{height:var(--item-icon-size);width:var(--item-icon-size)}.nav-bar-item-horizontal .nav-bar-item-icon-container::before{display:none}.nav-bar-item-horizontal:is(.nav-bar-item-active,[aria-selected=true]) .nav-bar-item-content::before{opacity:1;transform:scaleX(1)}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=nav-bar.cssresult.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-bar.cssresult.js","sourceRoot":"","sources":["nav-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/navbar/nav-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, md.comp.ripple, md.comp.focus-ring;@layer md.comp.nav-bar{:host(md-gb-nav-bar){--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2);--container-height: 64px;--container-shadow-color: var(--md-sys-color-shadow);--container-shape: var(--md-sys-shape-corner-none);--item-active-icon-color: var(--md-sys-color-on-secondary-container);--item-active-indicator-color: var(--md-sys-color-secondary-container);--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-leading-space: 16px;--item-active-indicator-shape: var(--md-sys-shape-corner-full);--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-active-state-layer-color: var(--md-sys-color-on-secondary-container);--item-between-space: var(--md-sys-space-0);--item-container-between-space: 6px;--item-icon-size: 24px;--item-inactive-icon-color: var(--md-sys-color-on-surface-variant);--item-inactive-label-text-color: var(--md-sys-color-on-surface-variant);--item-inactive-state-layer-color: var(--md-sys-color-on-secondary-container);--item-label-text: var(--md-sys-typescale-label-md);--item-label-text-axes: var(--md-sys-typescale-label-md-axes);--item-label-text-tracking: var(--md-sys-typescale-label-md-tracking);--motion-duration: var(--md-sys-motion-duration-short4);--motion-easing: var(--md-sys-motion-easing-emphasized);--nav-bar: true;display:flex;width:100%}:host(md-gb-nav-bar[item-layout=horizontal]){--item-active-indicator-height: 40px;--item-active-indicator-icon-label-space: 8px;--item-active-indicator-leading-space: 16px;--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: auto;--item-active-label-text-color: var(--md-sys-color-on-secondary-container)}:host(md-gb-nav-bar[item-layout=vertical]){--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-container-between-space: 6px}:host(md-gb-nav-bar-item){--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2);--container-height: 64px;--container-shadow-color: var(--md-sys-color-shadow);--container-shape: var(--md-sys-shape-corner-none);--item-active-icon-color: var(--md-sys-color-on-secondary-container);--item-active-indicator-color: var(--md-sys-color-secondary-container);--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-leading-space: 16px;--item-active-indicator-shape: var(--md-sys-shape-corner-full);--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-active-state-layer-color: var(--md-sys-color-on-secondary-container);--item-between-space: var(--md-sys-space-0);--item-container-between-space: 6px;--item-icon-size: 24px;--item-inactive-icon-color: var(--md-sys-color-on-surface-variant);--item-inactive-label-text-color: var(--md-sys-color-on-surface-variant);--item-inactive-state-layer-color: var(--md-sys-color-on-secondary-container);--item-label-text: var(--md-sys-typescale-label-md);--item-label-text-axes: var(--md-sys-typescale-label-md-axes);--item-label-text-tracking: var(--md-sys-typescale-label-md-tracking);--motion-duration: var(--md-sys-motion-duration-short4);--motion-easing: var(--md-sys-motion-easing-emphasized);display:flex;flex:1 1 0;min-width:48px;outline:none}:host(md-gb-nav-bar-item[item-layout=horizontal]){--item-active-indicator-height: 40px;--item-active-indicator-icon-label-space: 8px;--item-active-indicator-leading-space: 16px;--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: auto;--item-active-label-text-color: var(--md-sys-color-on-secondary-container)}:host(md-gb-nav-bar-item[item-layout=vertical]){--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-container-between-space: 6px}md-gb-nav-bar{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2);--container-height: 64px;--container-shadow-color: var(--md-sys-color-shadow);--container-shape: var(--md-sys-shape-corner-none);--item-active-icon-color: var(--md-sys-color-on-secondary-container);--item-active-indicator-color: var(--md-sys-color-secondary-container);--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-leading-space: 16px;--item-active-indicator-shape: var(--md-sys-shape-corner-full);--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-active-state-layer-color: var(--md-sys-color-on-secondary-container);--item-between-space: var(--md-sys-space-0);--item-container-between-space: 6px;--item-icon-size: 24px;--item-inactive-icon-color: var(--md-sys-color-on-surface-variant);--item-inactive-label-text-color: var(--md-sys-color-on-surface-variant);--item-inactive-state-layer-color: var(--md-sys-color-on-secondary-container);--item-label-text: var(--md-sys-typescale-label-md);--item-label-text-axes: var(--md-sys-typescale-label-md-axes);--item-label-text-tracking: var(--md-sys-typescale-label-md-tracking);--motion-duration: var(--md-sys-motion-duration-short4);--motion-easing: var(--md-sys-motion-easing-emphasized);--nav-bar: true;display:flex;width:100%}md-gb-nav-bar[item-layout=horizontal]{--item-active-indicator-height: 40px;--item-active-indicator-icon-label-space: 8px;--item-active-indicator-leading-space: 16px;--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: auto;--item-active-label-text-color: var(--md-sys-color-on-secondary-container)}md-gb-nav-bar[item-layout=vertical]{--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-container-between-space: 6px}.nav-bar{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2);--container-height: 64px;--container-shadow-color: var(--md-sys-color-shadow);--container-shape: var(--md-sys-shape-corner-none);--item-active-icon-color: var(--md-sys-color-on-secondary-container);--item-active-indicator-color: var(--md-sys-color-secondary-container);--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-leading-space: 16px;--item-active-indicator-shape: var(--md-sys-shape-corner-full);--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-active-state-layer-color: var(--md-sys-color-on-secondary-container);--item-between-space: var(--md-sys-space-0);--item-container-between-space: 6px;--item-icon-size: 24px;--item-inactive-icon-color: var(--md-sys-color-on-surface-variant);--item-inactive-label-text-color: var(--md-sys-color-on-surface-variant);--item-inactive-state-layer-color: var(--md-sys-color-on-secondary-container);--item-label-text: var(--md-sys-typescale-label-md);--item-label-text-axes: var(--md-sys-typescale-label-md-axes);--item-label-text-tracking: var(--md-sys-typescale-label-md-tracking);--motion-duration: var(--md-sys-motion-duration-short4);--motion-easing: var(--md-sys-motion-easing-emphasized);--md-elevation-shadow-color: var(--container-shadow-color);--nav-bar: true;align-items:stretch;background-color:var(--container-color);border:none;border-radius:var(--container-shape);box-shadow:var(--container-elevation);box-sizing:border-box;display:flex;flex-direction:row;gap:var(--item-between-space);height:var(--container-height);isolation:isolate;justify-content:space-around;margin:0;padding:0;position:relative;transition:all var(--motion-duration) var(--motion-easing);user-select:none;width:100%}.nav-bar>:focus-within,.nav-bar ::slotted(:focus-within){z-index:1}.nav-bar.nav-bar-horizontal{--item-active-indicator-height: 40px;--item-active-indicator-icon-label-space: 8px;--item-active-indicator-leading-space: 16px;--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: auto;--item-active-label-text-color: var(--md-sys-color-on-secondary-container)}.nav-bar.nav-bar-vertical{--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-container-between-space: 6px}.nav-bar-item{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2);--container-height: 64px;--container-shadow-color: var(--md-sys-color-shadow);--container-shape: var(--md-sys-shape-corner-none);--item-active-icon-color: var(--md-sys-color-on-secondary-container);--item-active-indicator-color: var(--md-sys-color-secondary-container);--item-active-indicator-height: 32px;--item-active-indicator-icon-label-space: 4px;--item-active-indicator-leading-space: 16px;--item-active-indicator-shape: var(--md-sys-shape-corner-full);--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: 56px;--item-active-label-text-color: var(--md-sys-color-secondary);--item-active-state-layer-color: var(--md-sys-color-on-secondary-container);--item-between-space: var(--md-sys-space-0);--item-container-between-space: 6px;--item-icon-size: 24px;--item-inactive-icon-color: var(--md-sys-color-on-surface-variant);--item-inactive-label-text-color: var(--md-sys-color-on-surface-variant);--item-inactive-state-layer-color: var(--md-sys-color-on-secondary-container);--item-label-text: var(--md-sys-typescale-label-md);--item-label-text-axes: var(--md-sys-typescale-label-md-axes);--item-label-text-tracking: var(--md-sys-typescale-label-md-tracking);--motion-duration: var(--md-sys-motion-duration-short4);--motion-easing: var(--md-sys-motion-easing-emphasized);--md-icon-color: var(--item-inactive-icon-color);--md-icon-fill: 0;--md-icon-size: var(--item-icon-size);--ripple-color: var(--item-inactive-state-layer-color);align-items:center;appearance:none;background:rgba(0,0,0,0);background-image:none;border:none;border-radius:var(--md-sys-space-100);box-sizing:border-box;color:var(--item-inactive-label-text-color);cursor:pointer;display:flex;flex:1 1 0;flex-direction:column;font:var(--item-label-text);font-variation-settings:var(--item-label-text-axes);height:100%;justify-content:center;letter-spacing:var(--item-label-text-tracking);margin:0;min-width:48px;padding:0;position:relative;text-decoration:none;transition:all var(--motion-duration) var(--motion-easing);user-select:none;width:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}.nav-bar-item:disabled,.nav-bar-item[disabled],.nav-bar-item.disabled{cursor:default;opacity:.38;pointer-events:none}.nav-bar-item-content{align-items:center;border-radius:var(--item-active-indicator-shape);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--item-active-indicator-icon-label-space);justify-content:center;padding-block:var(--item-container-between-space);position:relative;transition:all var(--motion-duration) var(--motion-easing)}.nav-bar-item-icon-container{align-items:center;background-color:rgba(0,0,0,0);border-radius:var(--item-active-indicator-shape);color:var(--item-inactive-icon-color);display:flex;height:var(--item-active-indicator-height);isolation:isolate;justify-content:center;position:relative;transition:all var(--motion-duration) var(--motion-easing);width:var(--item-active-indicator-width)}.nav-bar-item-icon-container::before{background-color:var(--item-active-indicator-color);border-radius:var(--item-active-indicator-shape);content:\"\";inset:0;opacity:0;position:absolute;transform:scaleX(0.5);transition:all var(--motion-duration) var(--motion-easing);z-index:-2}.nav-bar-item-icon{align-items:center;display:inline-flex;height:var(--item-icon-size);justify-content:center;position:relative;transition:all var(--motion-duration) var(--motion-easing);width:var(--item-icon-size)}.nav-bar-item-label{color:var(--item-inactive-label-text-color);font:var(--item-label-text);font-variation-settings:var(--item-label-text-axes);letter-spacing:var(--item-label-text-tracking);overflow:hidden;text-align:center;text-overflow:ellipsis;transition:all var(--motion-duration) var(--motion-easing);white-space:nowrap}.nav-bar-item-badge{align-items:center;background-color:var(--md-sys-color-error);border-radius:var(--md-sys-shape-corner-full);box-sizing:border-box;color:var(--md-sys-color-on-error);display:inline-flex;font:var(--md-sys-typescale-label-sm);height:16px;inset-block-start:-4px;inset-inline-start:calc(50% + 2px);justify-content:center;min-width:16px;padding-inline:4px;pointer-events:none;position:absolute;transition:all var(--motion-duration) var(--motion-easing);z-index:2}.nav-bar-item-badge-dot{height:6px;inset-block-start:0;inset-inline-start:calc(50% + 6px);min-width:6px;padding-inline:0;width:6px}.nav-bar-item:is(.nav-bar-item-active,[aria-selected=true]){--md-icon-color: var(--item-active-icon-color);--md-icon-fill: 1;--ripple-color: var(--item-active-state-layer-color);color:var(--item-active-label-text-color)}.nav-bar-item:is(.nav-bar-item-active,[aria-selected=true]) .nav-bar-item-icon-container{color:var(--item-active-icon-color)}.nav-bar-item:is(.nav-bar-item-active,[aria-selected=true]) .nav-bar-item-icon-container::before{opacity:1;transform:scaleX(1)}.nav-bar-item:is(.nav-bar-item-active,[aria-selected=true]) .nav-bar-item-label{color:var(--item-active-label-text-color)}.nav-bar-item-horizontal{--item-active-indicator-height: 40px;--item-active-indicator-icon-label-space: 8px;--item-active-indicator-leading-space: 16px;--item-active-indicator-trailing-space: 16px;--item-active-indicator-width: auto;--item-active-label-text-color: var(--md-sys-color-on-secondary-container)}.nav-bar-item-horizontal .nav-bar-item-content{display:inline-flex;flex-direction:row;gap:var(--item-active-indicator-icon-label-space);height:var(--item-active-indicator-height);isolation:isolate;padding-block:0;padding-inline:var(--item-active-indicator-leading-space) var(--item-active-indicator-trailing-space)}.nav-bar-item-horizontal .nav-bar-item-content::before{background-color:var(--item-active-indicator-color);border-radius:var(--item-active-indicator-shape);content:\"\";inset:0;opacity:0;position:absolute;transform:scaleX(0.6);transition:all var(--motion-duration) var(--motion-easing);z-index:-2}.nav-bar-item-horizontal .nav-bar-item-icon-container{height:var(--item-icon-size);width:var(--item-icon-size)}.nav-bar-item-horizontal .nav-bar-item-icon-container::before{display:none}.nav-bar-item-horizontal:is(.nav-bar-item-active,[aria-selected=true]) .nav-bar-item-content::before{opacity:1;transform:scaleX(1)}}\n`;\nexport default styles.styleSheet!;\n"]}

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

@@ -0,0 +1,86 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/** Navigation bar item layout configuration types. */
+export type NavBarItemLayout = 'vertical' | 'horizontal';
+/** Navigation bar item layout configurations. */
+export declare const NAV_BAR_ITEM_LAYOUTS: {
+    readonly vertical: "vertical";
+    readonly horizontal: "horizontal";
+};
+/** Navigation bar classes constants. */
+export declare const NAV_BAR_CLASSES: {
+    readonly navBar: "nav-bar";
+    readonly navBarVertical: "nav-bar-vertical";
+    readonly navBarHorizontal: "nav-bar-horizontal";
+};
+/** The state provided to the `navBarClasses()` function. */
+export interface NavBarClassesState {
+    /** The layout orientation of items inside the navigation bar. */
+    itemLayout?: NavBarItemLayout;
+}
+/**
+ * Returns navigation bar classes to apply based on the given state.
+ *
+ * @param state The state of the navigation bar.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function navBarClasses({ itemLayout, }?: NavBarClassesState): ClassInfo;
+/**
+ * Lit directive for navigation bar element class styling.
+ *
+ * @example
+ * ```ts
+ * html`<nav class="${navBar({itemLayout: 'vertical'})}">
+ *   <button class="${navBarItem({active: true})}">Home</button>
+ * </nav>`;
+ * ```
+ */
+export declare const navBar: (state?: NavBarClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;
+/** Navigation bar item classes constants. */
+export declare const NAV_BAR_ITEM_CLASSES: {
+    readonly navBarItem: "nav-bar-item";
+    readonly navBarItemActive: "nav-bar-item-active";
+    readonly navBarItemVertical: "nav-bar-item-vertical";
+    readonly navBarItemHorizontal: "nav-bar-item-horizontal";
+    readonly navBarItemContent: "nav-bar-item-content";
+    readonly navBarItemIconContainer: "nav-bar-item-icon-container";
+    readonly navBarItemIcon: "nav-bar-item-icon";
+    readonly navBarItemLabel: "nav-bar-item-label";
+    readonly navBarItemBadge: "nav-bar-item-badge";
+    readonly navBarItemBadgeDot: "nav-bar-item-badge-dot";
+};
+/** The state provided to the `navBarItemClasses()` function. */
+export interface NavBarItemClassesState {
+    /** Whether the navigation bar item is active/selected. */
+    active?: boolean;
+    /** Alias for `active`. */
+    selected?: boolean;
+    /** Whether the navigation bar item is disabled. */
+    disabled?: boolean;
+    /** The item layout orientation ('vertical' or 'horizontal'). */
+    itemLayout?: NavBarItemLayout;
+}
+/**
+ * Returns navigation bar item classes to apply based on the given state.
+ *
+ * @param state The state of the navigation bar item.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function navBarItemClasses({ active, selected, disabled, itemLayout, }?: NavBarItemClassesState): ClassInfo;
+/**
+ * Sets up navigation bar item functionality for the given element.
+ *
+ * @param item The element on which to set up navigation bar item functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export declare function setupNavBarItem(item: HTMLElement, opts?: {
+    signal?: AbortSignal;
+}): void;
+/**
+ * Lit directive for navigation bar item element class styling.
+ */
+export declare const navBarItem: (state?: NavBarItemClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;