@material/web 0.1.0-alpha.0

package/motion/animation.js

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Easing functions to use for web animations.
+ *
+ * TODO(b/241113345): replace with tokens
+ */
+export var Easing;
+(function (Easing) {
+    Easing["STANDARD"] = "cubic-bezier(0.2, 0, 0, 1)";
+})(Easing || (Easing = {}));
+/**
+ * Creates an `AnimationSignal` that can be used to cancel a previous task.
+ *
+ * @example
+ * class MyClass {
+ *   private labelAnimationSignal = createAnimationSignal();
+ *
+ *   private async animateLabel() {
+ *     // Start of the task. Previous tasks will be canceled.
+ *     const signal = this.labelAnimationSignal.start();
+ *
+ *     // Do async work...
+ *     if (signal.aborted) {
+ *       // Use AbortSignal to check if a request was made to abort after some
+ *       // asynchronous work.
+ *       return;
+ *     }
+ *
+ *     const animation = this.animate(...);
+ *     // Add event listeners to be notified when the task should be canceled.
+ *     signal.addEventListener('abort', () => {
+ *       animation.cancel();
+ *     });
+ *
+ *     animation.addEventListener('finish', () => {
+ *       // Tell the signal that the current task is finished.
+ *       this.labelAnimationSignal.finish();
+ *     });
+ *   }
+ * }
+ *
+ * @return An `AnimationSignal`.
+ */
+export function createAnimationSignal() {
+    // The current animation's AbortController
+    let animationAbortController = null;
+    return {
+        start() {
+            // Tell the previous animation to cancel.
+            animationAbortController?.abort();
+            // Set up a new AbortController for the current animation.
+            animationAbortController = new AbortController();
+            // Provide the AbortSignal so that the caller can check aborted status
+            // and add listeners.
+            return animationAbortController.signal;
+        },
+        finish() {
+            animationAbortController = null;
+        },
+    };
+}
+//# sourceMappingURL=animation.js.map

package/motion/animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.js","sourceRoot":"","sources":["animation.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;GAIG;AACH,MAAM,CAAN,IAAY,MAEX;AAFD,WAAY,MAAM;IAChB,iDAAuC,CAAA;AACzC,CAAC,EAFW,MAAM,KAAN,MAAM,QAEjB;AAmBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,UAAU,qBAAqB;IACnC,0CAA0C;IAC1C,IAAI,wBAAwB,GAAyB,IAAI,CAAC;IAE1D,OAAO;QACL,KAAK;YACH,yCAAyC;YACzC,wBAAwB,EAAE,KAAK,EAAE,CAAC;YAClC,0DAA0D;YAC1D,wBAAwB,GAAG,IAAI,eAAe,EAAE,CAAC;YACjD,sEAAsE;YACtE,qBAAqB;YACrB,OAAO,wBAAwB,CAAC,MAAM,CAAC;QACzC,CAAC;QACD,MAAM;YACJ,wBAAwB,GAAG,IAAI,CAAC;QAClC,CAAC;KACF,CAAC;AACJ,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Easing functions to use for web animations.\n *\n * TODO(b/241113345): replace with tokens\n */\nexport enum Easing {\n  STANDARD = 'cubic-bezier(0.2, 0, 0, 1)',\n}\n\n/**\n * A signal that is used for abortable tasks.\n */\nexport interface AnimationSignal {\n  /**\n   * Starts the abortable task. Any previous tasks started with this instance\n   * will be aborted.\n   *\n   * @return An `AbortSignal` for the current task.\n   */\n  start(): AbortSignal;\n  /**\n   * Complete the current task.\n   */\n  finish(): void;\n}\n\n/**\n * Creates an `AnimationSignal` that can be used to cancel a previous task.\n *\n * @example\n * class MyClass {\n *   private labelAnimationSignal = createAnimationSignal();\n *\n *   private async animateLabel() {\n *     // Start of the task. Previous tasks will be canceled.\n *     const signal = this.labelAnimationSignal.start();\n *\n *     // Do async work...\n *     if (signal.aborted) {\n *       // Use AbortSignal to check if a request was made to abort after some\n *       // asynchronous work.\n *       return;\n *     }\n *\n *     const animation = this.animate(...);\n *     // Add event listeners to be notified when the task should be canceled.\n *     signal.addEventListener('abort', () => {\n *       animation.cancel();\n *     });\n *\n *     animation.addEventListener('finish', () => {\n *       // Tell the signal that the current task is finished.\n *       this.labelAnimationSignal.finish();\n *     });\n *   }\n * }\n *\n * @return An `AnimationSignal`.\n */\nexport function createAnimationSignal(): AnimationSignal {\n  // The current animation's AbortController\n  let animationAbortController: AbortController|null = null;\n\n  return {\n    start() {\n      // Tell the previous animation to cancel.\n      animationAbortController?.abort();\n      // Set up a new AbortController for the current animation.\n      animationAbortController = new AbortController();\n      // Provide the AbortSignal so that the caller can check aborted status\n      // and add listeners.\n      return animationAbortController.signal;\n    },\n    finish() {\n      animationAbortController = null;\n    },\n  };\n}\n"]}

package/navigationbar/_navigation-bar.scss

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

package/navigationbar/harness.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '@material/web/testing/harness.js';
+import { NavigationTabHarness } from '../navigationtab/harness.js';
+import { NavigationBar } from './lib/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/navigationbar/harness.js

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '@material/web/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/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,kCAAkC,CAAC;AAEzD,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 '@material/web/testing/harness.js';\n\nimport {NavigationTabHarness} from '../navigationtab/harness.js';\n\nimport {NavigationBar} from './lib/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/navigationbar/lib/_navigation-bar-theme.scss

@@ -0,0 +1,87 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+// TODO(b/228217731): Remove compat dependencies
+@use 'sass:map';
+
+@use '@material/web/elevation/lib/elevation-theme';
+@use '@material/web/navigationtab/lib/navigation-tab-theme';
+@use '@material/web/compat/theme/keys';
+@use '@material/web/compat/theme/map-ext';
+@use '@material/web/compat/theme/theme-color';
+@use '@material/web/sass/resolvers';
+@use '@material/web/sass/theme';
+@use '@material/web/tokens/latest' as tokens;
+
+$light-theme: tokens.md-comp-navigation-bar-values();
+$dark-theme: tokens.md-comp-navigation-bar-values(
+  (
+    md-sys-color: tokens.md-sys-color-values-dark-non-dynamic(),
+    md-sys-elevation: tokens.md-sys-elevation-values(),
+  ),
+  $exclude-hardcoded-values: true
+);
+
+@mixin theme($theme, $resolvers: resolvers.$material) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: elevation-theme.resolve-theme(
+    $theme,
+    map.get($resolvers, elevation),
+    $shadow-color-token: container-shadow-color,
+    $elevation-tokens: (container-elevation)
+  );
+  $theme: theme.create-theme-vars($theme, 'navigation-bar');
+
+  @include theme.emit-theme-vars($theme);
+}
+
+@mixin theme-styles($theme, $resolvers: resolvers.$material) {
+  $theme: theme.validate-theme-styles(
+    $light-theme,
+    $theme,
+    $require-all: false
+  );
+  $theme: elevation-theme.resolve-theme(
+    $theme,
+    map.get($resolvers, elevation),
+    $shadow-color-token: container-shadow-color,
+    $elevation-tokens: (container-elevation)
+  );
+
+  .md3-navigation-tab {
+    @include navigation-tab-theme.theme-styles(
+      map-ext.pick($theme, map.keys(navigation-tab-theme.$light-theme)...)
+    );
+  }
+
+  $theme: theme.create-theme-vars($theme, 'navigation-bar');
+
+  @include _container-color(map.get($theme, container-color));
+  @include _container-shape(map.get($theme, container-shape));
+  @include _container-height(map.get($theme, container-height));
+  @include elevation-theme.theme-styles(
+    (
+      shadow: map.get($theme, container-elevation-shadow),
+      overlay-opacity: map.get($theme, container-elevation-overlay-opacity),
+      surface-tint-layer-color:
+        map.get($theme, container-surface-tint-layer-color),
+    )
+  );
+}
+
+@mixin _container-color($color) {
+  background-color: $color;
+}
+
+@mixin _container-height($height) {
+  height: $height;
+}
+
+@mixin _container-shape($shape-radius) {
+  border-radius: $shape-radius;
+}

package/navigationbar/lib/_navigation-bar.scss

@@ -0,0 +1,28 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use '@material/web/elevation/lib/elevation-overlay';
+
+@mixin static-styles() {
+  @include elevation-overlay.static-styles();
+
+  .md3-navigation-bar {
+    display: flex;
+    position: relative;
+    width: 100%;
+
+    .md3-elevation-overlay {
+      z-index: 0;
+    }
+
+    .md3-navigation-bar__tabs-slot-container {
+      display: inherit;
+      width: inherit;
+    }
+  }
+}

package/navigationbar/lib/constants.d.ts

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

package/navigationbar/lib/constants.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export {};
+//# sourceMappingURL=constants.js.map

package/navigationbar/lib/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 '@material/web/navigationtab/lib/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/navigationbar/lib/navigation-bar-styles.css.d.ts

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

package/navigationbar/lib/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 `.md3-elevation-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);z-index:-2}.md3-navigation-bar{display:flex;position:relative;width:100%}.md3-navigation-bar .md3-elevation-overlay{z-index:0}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}:host{width:100%}.md3-navigation-bar{background-color:var(--md-navigation-bar-container-color, var(--md-sys-color-surface, #fffbfe));border-radius:var(--md-navigation-bar-container-shape, 0);height:var(--md-navigation-bar-container-height, 80px);--md-elevation-box-shadow-for-gss:0px 1px 2px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 2px 6px 2px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-navigation-bar-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-navigation-bar .md3-navigation-tab{font-family:var(--md-navigation-bar-label-text-font, Roboto);font-size:var(--md-navigation-bar-label-text-size, 12px);letter-spacing:var(--md-navigation-bar-label-text-tracking, 0.5px);font-weight:var(--md-navigation-bar-label-text-weight, 500);--md-ripple-hover-state-layer-color:var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-focus-state-layer-color:var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-pressed-state-layer-color:var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-hover-state-layer-opacity:var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-focus-ring-container-outer-padding-vertical:-4px;--md-focus-ring-container-outer-padding-horizontal:-4px;--md-badge-color:var(--md-navigation-bar-badge-color, var(--md-sys-color-error, #b3261e));--md-badge-size:var(--md-navigation-bar-badge-size, 6px);--md-badge-shape:var(--md-navigation-bar-badge-shape, 3px);--md-badge-large-color:var(--md-navigation-bar-large-badge-color, var(--md-sys-color-error, #b3261e));--md-badge-large-size:var(--md-navigation-bar-large-badge-size, 16px);--md-badge-large-shape:var(--md-navigation-bar-large-badge-shape, 8px)}.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__icon{width:var(--md-navigation-bar-icon-size, 24px);height:var(--md-navigation-bar-icon-size, 24px);font-size:var(--md-navigation-bar-icon-size, 24px)}.md3-navigation-bar .md3-navigation-tab:not(:disabled).md3-navigation-tab--active .md3-navigation-tab__icon{color:var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):hover.md3-navigation-tab--active .md3-navigation-tab__icon{color:var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):focus.md3-navigation-tab--active .md3-navigation-tab__icon{color:var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):active.md3-navigation-tab--active .md3-navigation-tab__icon{color:var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:disabled.md3-navigation-tab--active .md3-navigation-tab__icon{fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):not(.md3-navigation-tab--active) .md3-navigation-tab__icon{color:var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):hover:not(.md3-navigation-tab--active) .md3-navigation-tab__icon{color:var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):focus:not(.md3-navigation-tab--active) .md3-navigation-tab__icon{color:var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):active:not(.md3-navigation-tab--active) .md3-navigation-tab__icon{color:var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:disabled:not(.md3-navigation-tab--active) .md3-navigation-tab__icon{fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled).md3-navigation-tab--active .md3-navigation-tab__label-text{color:var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):hover.md3-navigation-tab--active .md3-navigation-tab__label-text{color:var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):focus.md3-navigation-tab--active .md3-navigation-tab__label-text{color:var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):active.md3-navigation-tab--active .md3-navigation-tab__label-text{color:var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{color:var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):hover:not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{color:var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):focus:not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{color:var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):active:not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{color:var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__active-indicator{background-color:var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8))}.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__active-indicator,.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__icon-content{height:var(--md-navigation-bar-active-indicator-height, 32px)}.md3-navigation-bar .md3-navigation-tab.md3-navigation-tab--active .md3-navigation-tab__active-indicator,.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__icon-content{width:var(--md-navigation-bar-active-indicator-width, 64px)}.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__active-indicator{border-radius:var(--md-navigation-bar-active-indicator-shape, 9999px)}.md3-navigation-bar .md3-navigation-tab.md3-navigation-tab--active{--md-ripple-hover-state-layer-color:var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-focus-state-layer-color:var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-pressed-state-layer-color:var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-hover-state-layer-opacity:var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-navigation-bar-pressed-state-layer-opacity, 0.12)}.md3-navigation-bar .md3-elevation-overlay{background-color:var(--md-navigation-bar-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4))}.md3-navigation-bar .md3-elevation-overlay{opacity:var(--md-navigation-bar-container-elevation-overlay-opacity, 0.08)}/*# sourceMappingURL=navigation-bar-styles.css.map */
+`;
+//# sourceMappingURL=navigation-bar-styles.css.js.map

package/navigationbar/lib/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`.md3-elevation-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);z-index:-2}.md3-navigation-bar{display:flex;position:relative;width:100%}.md3-navigation-bar .md3-elevation-overlay{z-index:0}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}:host{width:100%}.md3-navigation-bar{background-color:var(--md-navigation-bar-container-color, var(--md-sys-color-surface, #fffbfe));border-radius:var(--md-navigation-bar-container-shape, 0);height:var(--md-navigation-bar-container-height, 80px);--md-elevation-box-shadow-for-gss:0px 1px 2px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 2px 6px 2px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-navigation-bar-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-navigation-bar .md3-navigation-tab{font-family:var(--md-navigation-bar-label-text-font, Roboto);font-size:var(--md-navigation-bar-label-text-size, 12px);letter-spacing:var(--md-navigation-bar-label-text-tracking, 0.5px);font-weight:var(--md-navigation-bar-label-text-weight, 500);--md-ripple-hover-state-layer-color:var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-focus-state-layer-color:var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-pressed-state-layer-color:var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-hover-state-layer-opacity:var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-focus-ring-container-outer-padding-vertical:-4px;--md-focus-ring-container-outer-padding-horizontal:-4px;--md-badge-color:var(--md-navigation-bar-badge-color, var(--md-sys-color-error, #b3261e));--md-badge-size:var(--md-navigation-bar-badge-size, 6px);--md-badge-shape:var(--md-navigation-bar-badge-shape, 3px);--md-badge-large-color:var(--md-navigation-bar-large-badge-color, var(--md-sys-color-error, #b3261e));--md-badge-large-size:var(--md-navigation-bar-large-badge-size, 16px);--md-badge-large-shape:var(--md-navigation-bar-large-badge-shape, 8px)}.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__icon{width:var(--md-navigation-bar-icon-size, 24px);height:var(--md-navigation-bar-icon-size, 24px);font-size:var(--md-navigation-bar-icon-size, 24px)}.md3-navigation-bar .md3-navigation-tab:not(:disabled).md3-navigation-tab--active .md3-navigation-tab__icon{color:var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):hover.md3-navigation-tab--active .md3-navigation-tab__icon{color:var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):focus.md3-navigation-tab--active .md3-navigation-tab__icon{color:var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):active.md3-navigation-tab--active .md3-navigation-tab__icon{color:var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:disabled.md3-navigation-tab--active .md3-navigation-tab__icon{fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):not(.md3-navigation-tab--active) .md3-navigation-tab__icon{color:var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):hover:not(.md3-navigation-tab--active) .md3-navigation-tab__icon{color:var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):focus:not(.md3-navigation-tab--active) .md3-navigation-tab__icon{color:var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):active:not(.md3-navigation-tab--active) .md3-navigation-tab__icon{color:var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:disabled:not(.md3-navigation-tab--active) .md3-navigation-tab__icon{fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled).md3-navigation-tab--active .md3-navigation-tab__label-text{color:var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):hover.md3-navigation-tab--active .md3-navigation-tab__label-text{color:var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):focus.md3-navigation-tab--active .md3-navigation-tab__label-text{color:var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):active.md3-navigation-tab--active .md3-navigation-tab__label-text{color:var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{color:var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):hover:not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{color:var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):focus:not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{color:var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):active:not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{color:var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__active-indicator{background-color:var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8))}.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__active-indicator,.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__icon-content{height:var(--md-navigation-bar-active-indicator-height, 32px)}.md3-navigation-bar .md3-navigation-tab.md3-navigation-tab--active .md3-navigation-tab__active-indicator,.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__icon-content{width:var(--md-navigation-bar-active-indicator-width, 64px)}.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__active-indicator{border-radius:var(--md-navigation-bar-active-indicator-shape, 9999px)}.md3-navigation-bar .md3-navigation-tab.md3-navigation-tab--active{--md-ripple-hover-state-layer-color:var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-focus-state-layer-color:var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-pressed-state-layer-color:var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-hover-state-layer-opacity:var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-navigation-bar-pressed-state-layer-opacity, 0.12)}.md3-navigation-bar .md3-elevation-overlay{background-color:var(--md-navigation-bar-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4))}.md3-navigation-bar .md3-elevation-overlay{opacity:var(--md-navigation-bar-container-elevation-overlay-opacity, 0.08)}/*# sourceMappingURL=navigation-bar-styles.css.map */\n`;\n "]}

package/navigationbar/lib/navigation-bar-styles.scss

@@ -0,0 +1,20 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use './navigation-bar';
+@use './navigation-bar-theme';
+
+@include navigation-bar.static-styles();
+
+:host {
+  width: 100%;
+}
+
+.md3-navigation-bar {
+  @include navigation-bar-theme.theme-styles(navigation-bar-theme.$light-theme);
+}

package/navigationbar/lib/navigation-bar.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { AnyDuringAriaMigration } from '@material/web/compat/base/aria-property.js';
+import { NavigationTab } from '@material/web/navigationtab/lib/navigation-tab.js';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { NavigationBarState } from './state.js';
+/** @soyCompatible */
+export declare class NavigationBar extends LitElement implements NavigationBarState {
+    activeIndex: number;
+    hideInactiveLabels: boolean;
+    tabs: NavigationTab[];
+    protected tabsElement: NavigationTab[];
+    /** @soyPrefixAttribute */ ariaLabel: string | AnyDuringAriaMigration;
+    /** @soyTemplate */
+    render(): TemplateResult;
+    firstUpdated(changedProperties: PropertyValues): void;
+    layout(): void;
+    private handleNavigationTabConnected;
+    private handleNavigationTabInteraction;
+    private handleKeydown;
+    private onActiveIndexChange;
+    private onHideInactiveLabelsChange;
+}

package/navigationbar/lib/navigation-bar.js

@@ -0,0 +1,150 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { KEY, normalizeKey } from '@material/web/compat/dom/keyboard.js';
+import { ariaProperty } from '@material/web/compat/base/aria-property.js';
+import { observer } from '@material/web/compat/base/observer.js';
+import { deepActiveElementPath } from '@material/web/compat/base/utils.js';
+import { html, LitElement } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+/** @soyCompatible */
+export class NavigationBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.activeIndex = 0;
+        this.hideInactiveLabels = false;
+        // tslint:disable-next-line:no-new-decorators
+        this.tabs = [];
+    }
+    /** @soyTemplate */
+    render() {
+        return html `<div class="md3-navigation-bar"
+            role="tablist"
+            aria-label="${ifDefined(this.ariaLabel)}"
+            @keydown="${this.handleKeydown}"
+            @navigation-tab-interaction="${this.handleNavigationTabInteraction}"
+            @navigation-tab-rendered=${this.handleNavigationTabConnected}
+          ><div class="md3-elevation-overlay"
+        ></div><div class="md3-navigation-bar__tabs-slot-container"
+        ><slot></slot></div></div>`;
+    }
+    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 = normalizeKey(event);
+        const activeElementPath = deepActiveElementPath();
+        const focusedTabIndex = this.tabs.findIndex((tab) => {
+            return tab.buttonElement ===
+                activeElementPath[activeElementPath.length - 1];
+        });
+        const isRTL = getComputedStyle(this).getPropertyValue('direction') === 'rtl';
+        const maxIndex = this.tabs.length - 1;
+        if (key === KEY.ENTER || key === KEY.SPACEBAR) {
+            this.activeIndex = focusedTabIndex;
+            return;
+        }
+        if (key === KEY.HOME) {
+            this.tabs[0].focus();
+            return;
+        }
+        if (key === KEY.END) {
+            this.tabs[maxIndex].focus();
+            return;
+        }
+        const toNextTab = (key === KEY.ARROW_RIGHT && !isRTL) ||
+            (key === KEY.ARROW_LEFT && isRTL);
+        if (toNextTab && focusedTabIndex === maxIndex) {
+            this.tabs[0].focus();
+            return;
+        }
+        if (toNextTab) {
+            this.tabs[focusedTabIndex + 1].focus();
+            return;
+        }
+        const toPreviousTab = (key === KEY.ARROW_LEFT && !isRTL) ||
+            (key === KEY.ARROW_RIGHT && 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;
+        }
+    }
+}
+__decorate([
+    property({ type: Number }) // tslint:disable-next-line:no-new-decorators
+    ,
+    observer(function (value) {
+        this.onActiveIndexChange(this.activeIndex);
+        this.dispatchEvent(new CustomEvent('navigation-bar-activated', {
+            detail: { tab: this.tabs[value], activeIndex: this.activeIndex },
+            bubbles: true,
+            composed: true
+        }));
+    }),
+    __metadata("design:type", Object)
+], NavigationBar.prototype, "activeIndex", void 0);
+__decorate([
+    property({ type: Boolean }) // tslint:disable-next-line:no-new-decorators
+    ,
+    observer(function (value) {
+        this.onHideInactiveLabelsChange(this.hideInactiveLabels);
+    }),
+    __metadata("design:type", Object)
+], NavigationBar.prototype, "hideInactiveLabels", void 0);
+__decorate([
+    observer(function () {
+        this.onHideInactiveLabelsChange(this.hideInactiveLabels);
+        this.onActiveIndexChange(this.activeIndex);
+    }),
+    __metadata("design:type", Array)
+], NavigationBar.prototype, "tabs", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true }),
+    __metadata("design:type", Array)
+], NavigationBar.prototype, "tabsElement", void 0);
+__decorate([
+    ariaProperty,
+    property({ attribute: 'aria-label' }),
+    __metadata("design:type", Object)
+], NavigationBar.prototype, "ariaLabel", void 0);
+//# sourceMappingURL=navigation-bar.js.map

package/navigationbar/lib/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 {KEY, normalizeKey} from '@material/web/compat/dom/keyboard.js';\nimport {AnyDuringAriaMigration, ariaProperty} from '@material/web/compat/base/aria-property.js';\nimport {observer} from '@material/web/compat/base/observer.js';\nimport {deepActiveElementPath} from '@material/web/compat/base/utils.js';\nimport {NavigationTab} from '@material/web/navigationtab/lib/navigation-tab.js';\nimport {html, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {NavigationTabInteractionEvent} from './constants.js';\nimport {NavigationBarState} from './state.js';\n\n/** @soyCompatible */\nexport class NavigationBar extends LitElement implements NavigationBarState {\n  @property({type: Number})  // tslint:disable-next-line:no-new-decorators\n  @observer(function(this: NavigationBar, value: number) {\n    this.onActiveIndexChange(this.activeIndex);\n    this.dispatchEvent(new CustomEvent('navigation-bar-activated', {\n      detail: {tab: this.tabs[value], activeIndex: this.activeIndex},\n      bubbles: true,\n      composed: true\n    }));\n  })\n  activeIndex = 0;\n\n  @property({type: Boolean})  // tslint:disable-next-line:no-new-decorators\n  @observer(function(this: NavigationBar, value: boolean) {\n    this.onHideInactiveLabelsChange(this.hideInactiveLabels);\n  })\n  hideInactiveLabels = false;\n\n  // tslint:disable-next-line:no-new-decorators\n  @observer(function(this: NavigationBar) {\n    this.onHideInactiveLabelsChange(this.hideInactiveLabels);\n    this.onActiveIndexChange(this.activeIndex);\n  })\n  tabs: NavigationTab[] = [];\n\n  @queryAssignedElements({flatten: true})\n  protected tabsElement!: NavigationTab[];\n\n  /** @soyPrefixAttribute */  // tslint:disable-next-line:no-new-decorators\n  @ariaProperty\n  @property({attribute: 'aria-label'})\n  override ariaLabel: string|AnyDuringAriaMigration;\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`<div class=\"md3-navigation-bar\"\n            role=\"tablist\"\n            aria-label=\"${ifDefined(this.ariaLabel)}\"\n            @keydown=\"${this.handleKeydown}\"\n            @navigation-tab-interaction=\"${this.handleNavigationTabInteraction}\"\n            @navigation-tab-rendered=${this.handleNavigationTabConnected}\n          ><div class=\"md3-elevation-overlay\"\n        ></div><div class=\"md3-navigation-bar__tabs-slot-container\"\n        ><slot></slot></div></div>`;\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 = normalizeKey(event);\n    const activeElementPath = deepActiveElementPath();\n    const focusedTabIndex = this.tabs.findIndex((tab) => {\n      return tab.buttonElement ===\n          activeElementPath[activeElementPath.length - 1];\n    });\n    const isRTL =\n        getComputedStyle(this).getPropertyValue('direction') === 'rtl';\n    const maxIndex = this.tabs.length - 1;\n\n    if (key === KEY.ENTER || key === KEY.SPACEBAR) {\n      this.activeIndex = focusedTabIndex;\n      return;\n    }\n\n    if (key === KEY.HOME) {\n      this.tabs[0].focus();\n      return;\n    }\n\n    if (key === KEY.END) {\n      this.tabs[maxIndex].focus();\n      return;\n    }\n\n    const toNextTab = (key === KEY.ARROW_RIGHT && !isRTL) ||\n        (key === KEY.ARROW_LEFT && 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 = (key === KEY.ARROW_LEFT && !isRTL) ||\n        (key === KEY.ARROW_RIGHT && 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/navigationbar/lib/state.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { NavigationTabState } from '@material/web/navigationtab/lib/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/navigationbar/lib/state.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export {};
+//# sourceMappingURL=state.js.map

package/navigationbar/lib/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 '@material/web/navigationtab/lib/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"]}

package/navigationbar/navigation-bar.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { NavigationBar } from './lib/navigation-bar.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-navigation-bar': MdNavigationBar;
+    }
+}
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdNavigationBar extends NavigationBar {
+    static styles: import("lit").CSSResult[];
+}

package/navigationbar/navigation-bar.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { NavigationBar } from './lib/navigation-bar.js';
+import { styles } from './lib/navigation-bar-styles.css.js';
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdNavigationBar = class MdNavigationBar extends NavigationBar {
+};
+MdNavigationBar.styles = [styles];
+MdNavigationBar = __decorate([
+    customElement('md-navigation-bar')
+], MdNavigationBar);
+export { MdNavigationBar };
+//# sourceMappingURL=navigation-bar.js.map

package/navigationbar/navigation-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-bar.js","sourceRoot":"","sources":["navigation-bar.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,aAAa,EAAC,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAC,MAAM,EAAC,MAAM,oCAAoC,CAAC;AAQ1D;;;;GAIG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,aAAa;CAEjD,CAAA;AADiB,sBAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AADvB,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAE3B;SAFY,eAAe","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {NavigationBar} from './lib/navigation-bar.js';\nimport {styles} from './lib/navigation-bar-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-bar': MdNavigationBar;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-navigation-bar')\nexport class MdNavigationBar extends NavigationBar {\n  static override styles = [styles];\n}\n"]}

package/navigationdrawer/_navigation-drawer-modal.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/navigation-drawer-modal-theme' show $light-theme, $dark-theme, theme;