@material/web 1.0.0-pre.8 → 1.0.0

package/labs/item/internal/item.js

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { property, queryAll } from 'lit/decorators.js';
+/**
+ * An item layout component.
+ */
+export class Item extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Only needed for SSR.
+         *
+         * Add this attribute when an item has two lines to avoid a Flash Of Unstyled
+         * Content. This attribute is not needed for single line items or items with
+         * three or more lines.
+         */
+        this.multiline = false;
+    }
+    render() {
+        return html `
+      <slot name="container"></slot>
+      <slot class="non-text" name="start"></slot>
+      <div class="text">
+        <slot name="overline"
+            @slotchange=${this.handleTextSlotChange}></slot>
+        <slot class="default-slot"
+            @slotchange=${this.handleTextSlotChange}></slot>
+        <slot name="headline"
+            @slotchange=${this.handleTextSlotChange}></slot>
+        <slot name="supporting-text"
+            @slotchange=${this.handleTextSlotChange}></slot>
+      </div>
+      <slot class="non-text" name="trailing-supporting-text"></slot>
+      <slot class="non-text" name="end"></slot>
+    `;
+    }
+    handleTextSlotChange() {
+        // Check if there's more than one text slot with content. If so, the item is
+        // multiline, which has a different min-height than single line items.
+        let isMultiline = false;
+        let slotsWithContent = 0;
+        for (const slot of this.textSlots) {
+            if (slotHasContent(slot)) {
+                slotsWithContent += 1;
+            }
+            if (slotsWithContent > 1) {
+                isMultiline = true;
+                break;
+            }
+        }
+        this.multiline = isMultiline;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Item.prototype, "multiline", void 0);
+__decorate([
+    queryAll('.text slot')
+], Item.prototype, "textSlots", void 0);
+function slotHasContent(slot) {
+    for (const node of slot.assignedNodes({ flatten: true })) {
+        // Assume there's content if there's an element slotted in
+        const isElement = node.nodeType === Node.ELEMENT_NODE;
+        // If there's only text nodes for the default slot, check if there's
+        // non-whitespace.
+        const isTextWithContent = node.nodeType === Node.TEXT_NODE && node.textContent?.match(/\S/);
+        if (isElement || isTextWithContent) {
+            return true;
+        }
+    }
+    return false;
+}
+//# sourceMappingURL=item.js.map

package/labs/item/internal/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","sourceRoot":"","sources":["item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,UAAU;IAApC;;QACE;;;;;;WAMG;QACuC,cAAS,GAAG,KAAK,CAAC;IAyC9D,CAAC;IArCU,MAAM;QACb,OAAO,IAAI,CAAA;;;;;0BAKW,IAAI,CAAC,oBAAoB;;0BAEzB,IAAI,CAAC,oBAAoB;;0BAEzB,IAAI,CAAC,oBAAoB;;0BAEzB,IAAI,CAAC,oBAAoB;;;;KAI9C,CAAC;IACJ,CAAC;IAEO,oBAAoB;QAC1B,4EAA4E;QAC5E,sEAAsE;QACtE,IAAI,WAAW,GAAG,KAAK,CAAC;QACxB,IAAI,gBAAgB,GAAG,CAAC,CAAC;QACzB,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE;YACjC,IAAI,cAAc,CAAC,IAAI,CAAC,EAAE;gBACxB,gBAAgB,IAAI,CAAC,CAAC;aACvB;YAED,IAAI,gBAAgB,GAAG,CAAC,EAAE;gBACxB,WAAW,GAAG,IAAI,CAAC;gBACnB,MAAM;aACP;SACF;QAED,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC;IAC/B,CAAC;CACF;AAzC2C;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;uCAAmB;AAEnB;IAAxC,QAAQ,CAAC,YAAY,CAAC;uCAAgD;AAyCzE,SAAS,cAAc,CAAC,IAAqB;IAC3C,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,aAAa,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,EAAE;QACtD,0DAA0D;QAC1D,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC;QACtD,oEAAoE;QACpE,kBAAkB;QAClB,MAAM,iBAAiB,GACnB,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QACtE,IAAI,SAAS,IAAI,iBAAiB,EAAE;YAClC,OAAO,IAAI,CAAC;SACb;KACF;IAED,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement} from 'lit';\nimport {property, queryAll} from 'lit/decorators.js';\n\n/**\n * An item layout component.\n */\nexport class Item extends LitElement {\n  /**\n   * Only needed for SSR.\n   *\n   * Add this attribute when an item has two lines to avoid a Flash Of Unstyled\n   * Content. This attribute is not needed for single line items or items with\n   * three or more lines.\n   */\n  @property({type: Boolean, reflect: true}) multiline = false;\n\n  @queryAll('.text slot') private readonly textSlots!: HTMLSlotElement[];\n\n  override render() {\n    return html`\n      <slot name=\"container\"></slot>\n      <slot class=\"non-text\" name=\"start\"></slot>\n      <div class=\"text\">\n        <slot name=\"overline\"\n            @slotchange=${this.handleTextSlotChange}></slot>\n        <slot class=\"default-slot\"\n            @slotchange=${this.handleTextSlotChange}></slot>\n        <slot name=\"headline\"\n            @slotchange=${this.handleTextSlotChange}></slot>\n        <slot name=\"supporting-text\"\n            @slotchange=${this.handleTextSlotChange}></slot>\n      </div>\n      <slot class=\"non-text\" name=\"trailing-supporting-text\"></slot>\n      <slot class=\"non-text\" name=\"end\"></slot>\n    `;\n  }\n\n  private handleTextSlotChange() {\n    // Check if there's more than one text slot with content. If so, the item is\n    // multiline, which has a different min-height than single line items.\n    let isMultiline = false;\n    let slotsWithContent = 0;\n    for (const slot of this.textSlots) {\n      if (slotHasContent(slot)) {\n        slotsWithContent += 1;\n      }\n\n      if (slotsWithContent > 1) {\n        isMultiline = true;\n        break;\n      }\n    }\n\n    this.multiline = isMultiline;\n  }\n}\n\nfunction slotHasContent(slot: HTMLSlotElement) {\n  for (const node of slot.assignedNodes({flatten: true})) {\n    // Assume there's content if there's an element slotted in\n    const isElement = node.nodeType === Node.ELEMENT_NODE;\n    // If there's only text nodes for the default slot, check if there's\n    // non-whitespace.\n    const isTextWithContent =\n        node.nodeType === Node.TEXT_NODE && node.textContent?.match(/\\S/);\n    if (isElement || isTextWithContent) {\n      return true;\n    }\n  }\n\n  return false;\n}\n"]}

package/labs/item/item.d.ts

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Item } from './internal/item.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-item': MdItem;
+    }
+}
+/**
+ * An item layout component that can be used inside list items to give them
+ * their customizable structure.
+ *
+ * `<md-item>` does not have any functionality, which must be added by the
+ * component using it.
+ *
+ * All text will wrap unless `white-space: nowrap` is set on the item or any of
+ * its children.
+ *
+ * Slots available:
+ * - `<default>`: The headline, or custom content.
+ * - `headline`: The first line.
+ * - `supporting-text`: Supporting text lines underneath the headline.
+ * - `trailing-supporting-text`: A small text snippet at the end of the item.
+ * - `start`: Any leading content, such as icons, avatars, or checkboxes.
+ * - `end`: Any trailing content, such as icons and buttons.
+ * - `container`: Background container content, intended for adding additional
+ *     styles, such as ripples or focus rings.
+ *
+ * @example
+ * ```html
+ * <md-item>Single line</md-item>
+ *
+ * <md-item>
+ *   <div class="custom-content">...</div>
+ * </md-item>
+ *
+ * <!-- Classic 1 to 3+ line list items -->
+ * <md-item>
+ *   <md-icon slot="start">image</md-icon>
+ *   <div slot="overline">Overline</div>
+ *   <div slot="headline">Headline</div>
+ *   <div="supporting-text">Supporting text</div>
+ *   <div="trailing-supporting-text">Trailing</div>
+ *   <md-icon slot="end">image</md-icon>
+ * </md-item>
+ * ```
+ *
+ * When wrapping `<md-item>`, forward the available slots to use the same slot
+ * structure for the wrapping component (this is what `<md-list-item>` does).
+ *
+ * @example
+ * ```html
+ * <md-item>
+ *   <slot></slot>
+ *   <slot name="overline" slot="overline"></slot>
+ *   <slot name="headline" slot="headline"></slot>
+ *   <slot name="supporting-text" slot="supporting-text"></slot>
+ *   <slot name="trailing-supporting-text"
+ *       slot="trailing-supporting-text"></slot>
+ *   <slot name="start" slot="start"></slot>
+ *   <slot name="end" slot="end"></slot>
+ * </md-item>
+ * ```
+ */
+export declare class MdItem extends Item {
+    static styles: import("lit").CSSResult[];
+}

package/labs/item/item.js

@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Item } from './internal/item.js';
+import { styles } from './internal/item-styles.css.js';
+/**
+ * An item layout component that can be used inside list items to give them
+ * their customizable structure.
+ *
+ * `<md-item>` does not have any functionality, which must be added by the
+ * component using it.
+ *
+ * All text will wrap unless `white-space: nowrap` is set on the item or any of
+ * its children.
+ *
+ * Slots available:
+ * - `<default>`: The headline, or custom content.
+ * - `headline`: The first line.
+ * - `supporting-text`: Supporting text lines underneath the headline.
+ * - `trailing-supporting-text`: A small text snippet at the end of the item.
+ * - `start`: Any leading content, such as icons, avatars, or checkboxes.
+ * - `end`: Any trailing content, such as icons and buttons.
+ * - `container`: Background container content, intended for adding additional
+ *     styles, such as ripples or focus rings.
+ *
+ * @example
+ * ```html
+ * <md-item>Single line</md-item>
+ *
+ * <md-item>
+ *   <div class="custom-content">...</div>
+ * </md-item>
+ *
+ * <!-- Classic 1 to 3+ line list items -->
+ * <md-item>
+ *   <md-icon slot="start">image</md-icon>
+ *   <div slot="overline">Overline</div>
+ *   <div slot="headline">Headline</div>
+ *   <div="supporting-text">Supporting text</div>
+ *   <div="trailing-supporting-text">Trailing</div>
+ *   <md-icon slot="end">image</md-icon>
+ * </md-item>
+ * ```
+ *
+ * When wrapping `<md-item>`, forward the available slots to use the same slot
+ * structure for the wrapping component (this is what `<md-list-item>` does).
+ *
+ * @example
+ * ```html
+ * <md-item>
+ *   <slot></slot>
+ *   <slot name="overline" slot="overline"></slot>
+ *   <slot name="headline" slot="headline"></slot>
+ *   <slot name="supporting-text" slot="supporting-text"></slot>
+ *   <slot name="trailing-supporting-text"
+ *       slot="trailing-supporting-text"></slot>
+ *   <slot name="start" slot="start"></slot>
+ *   <slot name="end" slot="end"></slot>
+ * </md-item>
+ * ```
+ */
+export let MdItem = class MdItem extends Item {
+};
+MdItem.styles = [styles];
+MdItem = __decorate([
+    customElement('md-item')
+], MdItem);
+//# sourceMappingURL=item.js.map

package/labs/item/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","sourceRoot":"","sources":["item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,MAAM,EAAC,MAAM,+BAA+B,CAAC;AAQrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AAEI,WAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,IAAI;;AACd,aAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AADvB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAElB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Item} from './internal/item.js';\nimport {styles} from './internal/item-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-item': MdItem;\n  }\n}\n\n/**\n * An item layout component that can be used inside list items to give them\n * their customizable structure.\n *\n * `<md-item>` does not have any functionality, which must be added by the\n * component using it.\n *\n * All text will wrap unless `white-space: nowrap` is set on the item or any of\n * its children.\n *\n * Slots available:\n * - `<default>`: The headline, or custom content.\n * - `headline`: The first line.\n * - `supporting-text`: Supporting text lines underneath the headline.\n * - `trailing-supporting-text`: A small text snippet at the end of the item.\n * - `start`: Any leading content, such as icons, avatars, or checkboxes.\n * - `end`: Any trailing content, such as icons and buttons.\n * - `container`: Background container content, intended for adding additional\n *     styles, such as ripples or focus rings.\n *\n * @example\n * ```html\n * <md-item>Single line</md-item>\n *\n * <md-item>\n *   <div class=\"custom-content\">...</div>\n * </md-item>\n *\n * <!-- Classic 1 to 3+ line list items -->\n * <md-item>\n *   <md-icon slot=\"start\">image</md-icon>\n *   <div slot=\"overline\">Overline</div>\n *   <div slot=\"headline\">Headline</div>\n *   <div=\"supporting-text\">Supporting text</div>\n *   <div=\"trailing-supporting-text\">Trailing</div>\n *   <md-icon slot=\"end\">image</md-icon>\n * </md-item>\n * ```\n *\n * When wrapping `<md-item>`, forward the available slots to use the same slot\n * structure for the wrapping component (this is what `<md-list-item>` does).\n *\n * @example\n * ```html\n * <md-item>\n *   <slot></slot>\n *   <slot name=\"overline\" slot=\"overline\"></slot>\n *   <slot name=\"headline\" slot=\"headline\"></slot>\n *   <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n *   <slot name=\"trailing-supporting-text\"\n *       slot=\"trailing-supporting-text\"></slot>\n *   <slot name=\"start\" slot=\"start\"></slot>\n *   <slot name=\"end\" slot=\"end\"></slot>\n * </md-item>\n * ```\n */\n@customElement('md-item')\nexport class MdItem extends Item {\n  static override styles = [styles];\n}\n"]}

package/labs/navigationbar/_navigation-bar.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/navigation-bar' show theme;

package/labs/navigationbar/harness.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../../testing/harness.js';
+import { NavigationTabHarness } from '../navigationtab/harness.js';
+import { NavigationBar } from './internal/navigation-bar.js';
+/**
+ * Test harness for navigation bars.
+ */
+export declare class NavigationBarHarness extends Harness<NavigationBar> {
+    readonly tab: Promise<NavigationTabHarness>;
+    /**
+     * Returns the active tab to be used for interaction simulation.
+     */
+    protected getInteractiveElement(): Promise<HTMLElement>;
+    protected getTab(): Promise<NavigationTabHarness>;
+}

package/labs/navigationbar/harness.js

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../../testing/harness.js';
+import { NavigationTabHarness } from '../navigationtab/harness.js';
+/**
+ * Test harness for navigation bars.
+ */
+export class NavigationBarHarness extends Harness {
+    constructor() {
+        super(...arguments);
+        this.tab = this.getTab();
+    }
+    /**
+     * Returns the active tab to be used for interaction simulation.
+     */
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        return (await this.tab).getInteractiveElement();
+    }
+    async getTab() {
+        await this.element.updateComplete;
+        const tab = this.element.tabs[this.element.activeIndex];
+        return new NavigationTabHarness(tab);
+    }
+}
+//# sourceMappingURL=harness.js.map

package/labs/navigationbar/harness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAC,oBAAoB,EAAC,MAAM,6BAA6B,CAAC;AAIjE;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,OAAsB;IAAhE;;QACW,QAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IAe/B,CAAC;IAbC;;OAEG;IACgB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAClD,CAAC;IAES,KAAK,CAAC,MAAM;QACpB,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QACxD,OAAO,IAAI,oBAAoB,CAAC,GAAG,CAAC,CAAC;IACvC,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../../testing/harness.js';\nimport {NavigationTabHarness} from '../navigationtab/harness.js';\n\nimport {NavigationBar} from './internal/navigation-bar.js';\n\n/**\n * Test harness for navigation bars.\n */\nexport class NavigationBarHarness extends Harness<NavigationBar> {\n  readonly tab = this.getTab();\n\n  /**\n   * Returns the active tab to be used for interaction simulation.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return (await this.tab).getInteractiveElement();\n  }\n\n  protected async getTab() {\n    await this.element.updateComplete;\n    const tab = this.element.tabs[this.element.activeIndex];\n    return new NavigationTabHarness(tab);\n  }\n}\n"]}

package/labs/navigationbar/internal/_navigation-bar.scss

@@ -0,0 +1,70 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../../elevation/elevation';
+@use '../../../tokens';
+// go/keep-sorted end
+
+$_md-sys-motion: tokens.md-sys-motion-values();
+
+@mixin theme($tokens) {
+  // $supported-tokens: tokens.$md-comp-navigation-bar-supported-tokens;
+
+  @each $token, $value in $tokens {
+    // @if list.index($supported-tokens, $token) == null {
+    //   @error 'Token `#{$token}` is not a supported token.';
+    // }
+
+    @if $value {
+      --md-navigation-bar-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-navigation-bar-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-navigation-bar-#{$token}, #{$value});
+    }
+
+    @include elevation.theme(
+      (
+        'level': var(--_container-elevation),
+        'shadow-color': var(--_container-shadow-color),
+      )
+    );
+
+    width: 100%;
+  }
+
+  .md3-navigation-bar {
+    display: flex;
+    position: relative;
+    width: 100%;
+    background-color: var(--_container-color);
+    border-radius: var(--_container-shape);
+    height: var(--_container-height);
+
+    .md3-navigation-bar__tabs-slot-container {
+      display: inherit;
+      width: inherit;
+    }
+  }
+
+  md-elevation {
+    transition-duration: 280ms;
+    transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');
+    z-index: 0;
+  }
+}

package/labs/navigationbar/internal/constants.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { NavigationTabState } from '../../navigationtab/internal/state.js';
+/**
+ * MDCNavigationTabInteractionEventDetail provides details for the interaction
+ * event.
+ */
+export interface MDCNavigationTabInteractionEventDetail {
+    state: NavigationTabState;
+}
+/**
+ * NavigationTabInteractionEvent is the custom event for the interaction event.
+ */
+export type NavigationTabInteractionEvent = CustomEvent<MDCNavigationTabInteractionEventDetail>;

package/labs/navigationbar/internal/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["constants.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {NavigationTabState} from '../../navigationtab/internal/state.js';\n\n/**\n * MDCNavigationTabInteractionEventDetail provides details for the interaction\n * event.\n */\nexport interface MDCNavigationTabInteractionEventDetail {\n  state: NavigationTabState;\n}\n\n/**\n * NavigationTabInteractionEvent is the custom event for the interaction event.\n */\nexport type NavigationTabInteractionEvent =\n    CustomEvent<MDCNavigationTabInteractionEventDetail>;\n"]}

package/labs/navigationbar/internal/navigation-bar-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, 32px);--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, 9999px);--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, 64px);--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-icon-color: var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-hover-label-text-color: var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-icon-color: var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-label-text-color: var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, var(--md-sys-typescale-label-medium-weight-prominent, var(--md-ref-typeface-weight-bold, 700)));--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-pressed-label-text-color: var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shape: var(--md-navigation-bar-container-shape, 0px);--_focus-state-layer-opacity: var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-navigation-bar-icon-size, 24px);--_inactive-focus-icon-color: var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-icon-color: var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-label-text-color: var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-pressed-icon-color: var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem));--_label-text-size: var(--md-navigation-bar-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem));--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, );--_label-text-type: var(--md-navigation-bar-label-text-type, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-medium-size, 0.75rem) / var(--md-sys-typescale-label-medium-line-height, 1rem) var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-weight: var(--md-navigation-bar-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color);width:100%}.md3-navigation-bar{display:flex;position:relative;width:100%;background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height)}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{transition-duration:280ms;z-index:0}/*# sourceMappingURL=navigation-bar-styles.css.map */
+`;
+//# sourceMappingURL=navigation-bar-styles.css.js.map

package/labs/navigationbar/internal/navigation-bar-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-bar-styles.css.js","sourceRoot":"","sources":["navigation-bar-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, 32px);--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, 9999px);--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, 64px);--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-icon-color: var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-hover-label-text-color: var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-icon-color: var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-label-text-color: var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, var(--md-sys-typescale-label-medium-weight-prominent, var(--md-ref-typeface-weight-bold, 700)));--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-pressed-label-text-color: var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shape: var(--md-navigation-bar-container-shape, 0px);--_focus-state-layer-opacity: var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-navigation-bar-icon-size, 24px);--_inactive-focus-icon-color: var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-icon-color: var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-label-text-color: var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-pressed-icon-color: var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem));--_label-text-size: var(--md-navigation-bar-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem));--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, );--_label-text-type: var(--md-navigation-bar-label-text-type, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-medium-size, 0.75rem) / var(--md-sys-typescale-label-medium-line-height, 1rem) var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-weight: var(--md-navigation-bar-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color);width:100%}.md3-navigation-bar{display:flex;position:relative;width:100%;background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height)}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{transition-duration:280ms;z-index:0}/*# sourceMappingURL=navigation-bar-styles.css.map */\n`;\n "]}

package/labs/navigationbar/internal/navigation-bar.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../../elevation/elevation.js';
+import { LitElement, PropertyValues } from 'lit';
+import { NavigationTab } from '../../navigationtab/internal/navigation-tab.js';
+import { NavigationBarState } from './state.js';
+/**
+ * TODO(b/265346501): add docs
+ */
+export declare class NavigationBar extends LitElement implements NavigationBarState {
+    activeIndex: number;
+    hideInactiveLabels: boolean;
+    tabs: NavigationTab[];
+    private readonly tabsElement;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues<NavigationBar>): void;
+    firstUpdated(changedProperties: PropertyValues): void;
+    layout(): void;
+    private handleNavigationTabConnected;
+    private handleNavigationTabInteraction;
+    private handleKeydown;
+    private onActiveIndexChange;
+    private onHideInactiveLabelsChange;
+}

package/labs/navigationbar/internal/navigation-bar.js

@@ -0,0 +1,138 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '../../../elevation/elevation.js';
+import { html, LitElement, nothing } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { requestUpdateOnAriaChange } from '../../../internal/aria/delegate.js';
+import { isRtl } from '../../../internal/controller/is-rtl.js';
+/**
+ * TODO(b/265346501): add docs
+ */
+export class NavigationBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.activeIndex = 0;
+        this.hideInactiveLabels = false;
+        this.tabs = [];
+    }
+    render() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
+        return html `<div class="md3-navigation-bar"
+            role="tablist"
+            aria-label=${ariaLabel || nothing}
+            @keydown="${this.handleKeydown}"
+            @navigation-tab-interaction="${this.handleNavigationTabInteraction}"
+            @navigation-tab-rendered=${this.handleNavigationTabConnected}
+          ><md-elevation></md-elevation
+          ><div class="md3-navigation-bar__tabs-slot-container"
+        ><slot></slot></div></div>`;
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('activeIndex')) {
+            this.onActiveIndexChange(this.activeIndex);
+            this.dispatchEvent(new CustomEvent('navigation-bar-activated', {
+                detail: { tab: this.tabs[this.activeIndex], activeIndex: this.activeIndex },
+                bubbles: true,
+                composed: true
+            }));
+        }
+        if (changedProperties.has('hideInactiveLabels')) {
+            this.onHideInactiveLabelsChange(this.hideInactiveLabels);
+        }
+        if (changedProperties.has('tabs')) {
+            this.onHideInactiveLabelsChange(this.hideInactiveLabels);
+            this.onActiveIndexChange(this.activeIndex);
+        }
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.layout();
+    }
+    layout() {
+        if (!this.tabsElement)
+            return;
+        const navTabs = [];
+        for (const node of this.tabsElement) {
+            navTabs.push(node);
+        }
+        this.tabs = navTabs;
+    }
+    handleNavigationTabConnected(event) {
+        const target = event.target;
+        if (this.tabs.indexOf(target) === -1) {
+            this.layout();
+        }
+    }
+    handleNavigationTabInteraction(event) {
+        this.activeIndex = this.tabs.indexOf(event.detail.state);
+    }
+    handleKeydown(event) {
+        const key = event.key;
+        const focusedTabIndex = this.tabs.findIndex((tab) => {
+            return tab.matches(':focus-within');
+        });
+        const isRTL = isRtl(this);
+        const maxIndex = this.tabs.length - 1;
+        if (key === 'Enter' || key === ' ') {
+            this.activeIndex = focusedTabIndex;
+            return;
+        }
+        if (key === 'Home') {
+            this.tabs[0].focus();
+            return;
+        }
+        if (key === 'End') {
+            this.tabs[maxIndex].focus();
+            return;
+        }
+        const toNextTab = (key === 'ArrowRight' && !isRTL) || (key === 'ArrowLeft' && isRTL);
+        if (toNextTab && focusedTabIndex === maxIndex) {
+            this.tabs[0].focus();
+            return;
+        }
+        if (toNextTab) {
+            this.tabs[focusedTabIndex + 1].focus();
+            return;
+        }
+        const toPreviousTab = (key === 'ArrowLeft' && !isRTL) || (key === 'ArrowRight' && isRTL);
+        if (toPreviousTab && focusedTabIndex === 0) {
+            this.tabs[maxIndex].focus();
+            return;
+        }
+        if (toPreviousTab) {
+            this.tabs[focusedTabIndex - 1].focus();
+            return;
+        }
+    }
+    onActiveIndexChange(value) {
+        if (!this.tabs[value]) {
+            throw new Error('NavigationBar: activeIndex is out of bounds.');
+        }
+        for (let i = 0; i < this.tabs.length; i++) {
+            this.tabs[i].active = i === value;
+        }
+    }
+    onHideInactiveLabelsChange(value) {
+        for (const tab of this.tabs) {
+            tab.hideInactiveLabel = value;
+        }
+    }
+}
+(() => {
+    requestUpdateOnAriaChange(NavigationBar);
+})();
+__decorate([
+    property({ type: Number, attribute: 'active-index' })
+], NavigationBar.prototype, "activeIndex", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-inactive-labels' })
+], NavigationBar.prototype, "hideInactiveLabels", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true })
+], NavigationBar.prototype, "tabsElement", void 0);
+//# sourceMappingURL=navigation-bar.js.map

package/labs/navigationbar/internal/navigation-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-bar.js","sourceRoot":"","sources":["navigation-bar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../elevation/elevation.js';\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';\nimport {isRtl} from '../../../internal/controller/is-rtl.js';\nimport {NavigationTab} from '../../navigationtab/internal/navigation-tab.js';\n\nimport {NavigationTabInteractionEvent} from './constants.js';\nimport {NavigationBarState} from './state.js';\n\n/**\n * TODO(b/265346501): add docs\n */\nexport class NavigationBar extends LitElement implements NavigationBarState {\n  static {\n    requestUpdateOnAriaChange(NavigationBar);\n  }\n\n  @property({type: Number, attribute: 'active-index'}) activeIndex = 0;\n\n  @property({type: Boolean, attribute: 'hide-inactive-labels'})\n  hideInactiveLabels = false;\n\n  tabs: NavigationTab[] = [];\n\n  @queryAssignedElements({flatten: true})\n  private readonly tabsElement!: NavigationTab[];\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`<div class=\"md3-navigation-bar\"\n            role=\"tablist\"\n            aria-label=${ariaLabel || nothing}\n            @keydown=\"${this.handleKeydown}\"\n            @navigation-tab-interaction=\"${this.handleNavigationTabInteraction}\"\n            @navigation-tab-rendered=${this.handleNavigationTabConnected}\n          ><md-elevation></md-elevation\n          ><div class=\"md3-navigation-bar__tabs-slot-container\"\n        ><slot></slot></div></div>`;\n  }\n\n  protected override updated(changedProperties: PropertyValues<NavigationBar>) {\n    if (changedProperties.has('activeIndex')) {\n      this.onActiveIndexChange(this.activeIndex);\n      this.dispatchEvent(new CustomEvent('navigation-bar-activated', {\n        detail:\n            {tab: this.tabs[this.activeIndex], activeIndex: this.activeIndex},\n        bubbles: true,\n        composed: true\n      }));\n    }\n\n    if (changedProperties.has('hideInactiveLabels')) {\n      this.onHideInactiveLabelsChange(this.hideInactiveLabels);\n    }\n\n    if (changedProperties.has('tabs')) {\n      this.onHideInactiveLabelsChange(this.hideInactiveLabels);\n      this.onActiveIndexChange(this.activeIndex);\n    }\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    this.layout();\n  }\n\n  layout() {\n    if (!this.tabsElement) return;\n    const navTabs: NavigationTab[] = [];\n    for (const node of this.tabsElement) {\n      navTabs.push(node);\n    }\n    this.tabs = navTabs;\n  }\n\n  private handleNavigationTabConnected(event: CustomEvent) {\n    const target = event.target as NavigationTab;\n    if (this.tabs.indexOf(target) === -1) {\n      this.layout();\n    }\n  }\n\n  private handleNavigationTabInteraction(event: NavigationTabInteractionEvent) {\n    this.activeIndex = this.tabs.indexOf(event.detail.state as NavigationTab);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const key = event.key;\n    const focusedTabIndex = this.tabs.findIndex((tab) => {\n      return tab.matches(':focus-within');\n    });\n    const isRTL = isRtl(this);\n    const maxIndex = this.tabs.length - 1;\n\n    if (key === 'Enter' || key === ' ') {\n      this.activeIndex = focusedTabIndex;\n      return;\n    }\n\n    if (key === 'Home') {\n      this.tabs[0].focus();\n      return;\n    }\n\n    if (key === 'End') {\n      this.tabs[maxIndex].focus();\n      return;\n    }\n\n    const toNextTab =\n        (key === 'ArrowRight' && !isRTL) || (key === 'ArrowLeft' && isRTL);\n    if (toNextTab && focusedTabIndex === maxIndex) {\n      this.tabs[0].focus();\n      return;\n    }\n    if (toNextTab) {\n      this.tabs[focusedTabIndex + 1].focus();\n      return;\n    }\n\n    const toPreviousTab =\n        (key === 'ArrowLeft' && !isRTL) || (key === 'ArrowRight' && isRTL);\n    if (toPreviousTab && focusedTabIndex === 0) {\n      this.tabs[maxIndex].focus();\n      return;\n    }\n    if (toPreviousTab) {\n      this.tabs[focusedTabIndex - 1].focus();\n      return;\n    }\n  }\n\n  private onActiveIndexChange(value: number) {\n    if (!this.tabs[value]) {\n      throw new Error('NavigationBar: activeIndex is out of bounds.');\n    }\n    for (let i = 0; i < this.tabs.length; i++) {\n      this.tabs[i].active = i === value;\n    }\n  }\n\n  private onHideInactiveLabelsChange(value: boolean) {\n    for (const tab of this.tabs) {\n      tab.hideInactiveLabel = value;\n    }\n  }\n}\n"]}

package/labs/navigationbar/internal/state.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { NavigationTabState } from '../../navigationtab/internal/state.js';
+/**
+ * The state of a navigation Bar.
+ */
+export interface NavigationBarState {
+    /**
+     * Index of the active navigation tab.
+     */
+    activeIndex: number;
+    /**
+     * If true, inactive navigation tabs will hide their label.
+     */
+    hideInactiveLabels: boolean;
+    /**
+     * An array of the navigation tab states.
+     */
+    tabs: NavigationTabState[];
+}

package/labs/navigationbar/internal/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","sourceRoot":"","sources":["state.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {NavigationTabState} from '../../navigationtab/internal/state.js';\n\n/**\n * The state of a navigation Bar.\n */\nexport interface NavigationBarState {\n  /**\n   * Index of the active navigation tab.\n   */\n  activeIndex: number;\n  /**\n   * If true, inactive navigation tabs will hide their label.\n   */\n  hideInactiveLabels: boolean;\n  /**\n   * An array of the navigation tab states.\n   */\n  tabs: NavigationTabState[];\n}\n"]}