@material/web 1.0.0-pre.1 → 1.0.0-pre.11

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 './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/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 './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/labs/navigationbar/lib/_navigation-bar.scss

@@ -0,0 +1,68 @@
+//
+// 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 '../../../internal/sass/theme';
+@use '../../../tokens';
+// go/keep-sorted end
+
+$_md-sys-motion: tokens.md-sys-motion-values();
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(
+    tokens.md-comp-navigation-bar-values(),
+    $tokens
+  );
+  $tokens: theme.create-theme-vars($tokens, 'navigation-bar');
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-navigation-bar-values();
+  $tokens: theme.create-theme-vars($tokens, 'navigation-bar');
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$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/lib/constants.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { NavigationTabState } from '../../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 type NavigationTabInteractionEvent = CustomEvent<MDCNavigationTabInteractionEventDetail>;

package/labs/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 `: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, 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-ref-typeface-plain, Roboto));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, 1rem);--_label-text-size: var(--md-navigation-bar-label-text-size, 0.75rem);--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, 0.031rem);--_label-text-type: var(--md-navigation-bar-label-text-type, 500 0.75rem / 1rem var(--md-ref-typeface-plain, Roboto));--_label-text-weight: var(--md-navigation-bar-label-text-weight, 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/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`: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, 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-ref-typeface-plain, Roboto));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, 1rem);--_label-text-size: var(--md-navigation-bar-label-text-size, 0.75rem);--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, 0.031rem);--_label-text-type: var(--md-navigation-bar-label-text-type, 500 0.75rem / 1rem var(--md-ref-typeface-plain, Roboto));--_label-text-weight: var(--md-navigation-bar-label-text-weight, 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/lib/navigation-bar-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './navigation-bar';
+// go/keep-sorted end
+
+@include navigation-bar.styles;

package/labs/navigationbar/lib/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/lib/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/lib/navigation-bar.js

@@ -0,0 +1,140 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var _a;
+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;
+        }
+    }
+}
+_a = NavigationBar;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
+__decorate([
+    property({ type: Number })
+], NavigationBar.prototype, "activeIndex", void 0);
+__decorate([
+    property({ type: Boolean })
+], NavigationBar.prototype, "hideInactiveLabels", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true })
+], NavigationBar.prototype, "tabsElement", void 0);
+//# sourceMappingURL=navigation-bar.js.map

package/labs/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 '../../../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/lib/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(this);\n  }\n\n  @property({type: Number}) activeIndex = 0;\n\n  @property({type: Boolean}) 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/navigation-bar.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @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;
+    }
+}
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdNavigationBar extends NavigationBar {
+    static styles: import("lit").CSSResult[];
+}

package/labs/navigationbar/navigation-bar.js

@@ -0,0 +1,21 @@
+/**
+ * @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';
+/**
+ * @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/labs/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;;;GAGG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,aAAa;;AAChC,sBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;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 * @final\n * @suppress {visibility}\n */\n@customElement('md-navigation-bar')\nexport class MdNavigationBar extends NavigationBar {\n  static override styles = [styles];\n}\n"]}

package/labs/navigationdrawer/lib/_navigation-drawer-modal.scss

@@ -0,0 +1,107 @@
+//
+// Copyright 2021 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 '../../../internal/motion/animation';
+@use '../../../internal/sass/theme';
+// go/keep-sorted end
+
+$_curve: animation.$standard-easing;
+$_delay: 0s;
+$_transition-duration: 0.25s;
+
+$_reference: (
+  'container-color': #fff,
+  'container-height': 100%,
+  'container-shape': 0 16px 16px 0,
+  'container-width': 360px,
+  // TODO(b/216384393): Temporary existing token to use for shadow color
+  'divider-color': #000,
+  'modal-container-elevation': 1,
+  'scrim-color': null,
+  'scrim-opacity': 0.04,
+  'standard-container-elevation': 0,
+);
+
+$_custom-property-prefix: 'navigation-drawer-modal';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme($_reference, $tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: $_reference;
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    @include elevation.theme(
+      (
+        'level': var(--_modal-container-elevation),
+      )
+    );
+  }
+
+  .md3-navigation-drawer-modal {
+    bottom: 0;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: flex-end;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    inline-size: 0;
+
+    transition: inline-size $_transition-duration $_curve $_delay,
+      visibility $_delay $_curve $_transition-duration;
+  }
+
+  .md3-navigation-drawer-modal--opened {
+    transition: inline-size $_transition-duration $_curve $_delay,
+      visibility $_delay $_curve $_delay;
+  }
+
+  .md3-navigation-drawer-modal--pivot-at-start {
+    justify-content: flex-start;
+  }
+
+  .md3-navigation-drawer-modal__slot-content {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+
+  .md3-navigation-drawer-modal__scrim {
+    inset: 0;
+    opacity: 0;
+    position: absolute;
+    visibility: hidden;
+    background-color: var(--_scrim-color);
+
+    transition: opacity $_transition-duration $_curve $_delay,
+      visibility $_delay $_curve $_transition-duration;
+  }
+
+  .md3-navigation-drawer-modal--scrim-visible {
+    visibility: visible;
+    opacity: var(--_scrim-opacity);
+
+    transition: opacity $_transition-duration $_curve $_delay,
+      visibility $_delay $_curve $_delay;
+  }
+}

package/labs/navigationdrawer/lib/_navigation-drawer.scss

@@ -0,0 +1,94 @@
+//
+// Copyright 2021 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 '../../../elevation/elevation';
+@use '../../../internal/motion/animation';
+@use '../../../internal/sass/theme';
+// go/keep-sorted end
+
+$curve: animation.$standard-easing;
+$default: 0s;
+$delay: 0s;
+$transition-duration: 0.25s;
+
+$_reference: (
+  'container-color': #fff,
+  'container-height': 100%,
+  'container-shape': 0 16px 16px 0,
+  'container-width': 360px,
+  // TODO(b/216384393): Temporary existing token to use for shadow color
+  'divider-color': #000,
+  'modal-container-elevation': 1,
+  'standard-container-elevation': 0,
+);
+
+$_custom-property-prefix: 'navigation-drawer';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme($_reference, $tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: $_reference;
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    @include elevation.theme(
+      (
+        'level': var(--_standard-container-elevation),
+        'shadow-color': var(--_divider-color),
+      )
+    );
+  }
+
+  :host {
+    display: flex;
+  }
+
+  .md3-navigation-drawer {
+    inline-size: 0;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: flex-end;
+    overflow: hidden;
+    overflow-y: auto;
+    visibility: hidden;
+
+    transition: inline-size $transition-duration $curve $delay,
+      visibility $default $curve $transition-duration;
+  }
+
+  md-elevation {
+    z-index: 0;
+  }
+
+  .md3-navigation-drawer--opened {
+    visibility: visible;
+
+    transition: inline-size $transition-duration $curve $delay,
+      visibility $default $curve $default;
+  }
+
+  .md3-navigation-drawer--pivot-at-start {
+    justify-content: flex-start;
+  }
+
+  .md3-navigation-drawer__slot-content {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+}

package/labs/navigationdrawer/lib/_shared.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.
+
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
+
+@mixin styles() {
+  .md3-navigation-drawer-modal {
+    background-color: var(--_container-color);
+    border-radius: var(--_container-shape);
+    height: var(--_container-height);
+
+    &.md3-navigation-drawer-modal--opened {
+      inline-size: var(--_container-width);
+    }
+
+    .md3-navigation-drawer-modal__slot-content {
+      min-inline-size: var(--_container-width);
+      max-inline-size: var(--_container-width);
+    }
+  }
+}

package/labs/navigationdrawer/lib/navigation-drawer-modal-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{--_container-color: var(--md-navigation-drawer-modal-container-color, #fff);--_container-height: var(--md-navigation-drawer-modal-container-height, 100%);--_container-shape: var(--md-navigation-drawer-modal-container-shape, 0 16px 16px 0);--_container-width: var(--md-navigation-drawer-modal-container-width, 360px);--_divider-color: var(--md-navigation-drawer-modal-divider-color, #000);--_modal-container-elevation: var(--md-navigation-drawer-modal-modal-container-elevation, 1);--_scrim-color: ;--_scrim-opacity: var(--md-navigation-drawer-modal-scrim-opacity, 0.04);--_standard-container-elevation: var(--md-navigation-drawer-modal-standard-container-elevation, 0);--md-elevation-level:var(--_modal-container-elevation)}.md3-navigation-drawer-modal{bottom:0;box-sizing:border-box;display:flex;justify-content:flex-end;overflow:hidden;position:absolute;top:0;inline-size:0;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}.md3-navigation-drawer-modal--opened{transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s}.md3-navigation-drawer-modal--pivot-at-start{justify-content:flex-start}.md3-navigation-drawer-modal__slot-content{display:flex;flex-direction:column;position:relative}.md3-navigation-drawer-modal__scrim{inset:0;opacity:0;position:absolute;visibility:hidden;background-color:var(--_scrim-color);transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}.md3-navigation-drawer-modal--scrim-visible{visibility:visible;opacity:var(--_scrim-opacity);transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s}/*# sourceMappingURL=navigation-drawer-modal-styles.css.map */
+`;
+//# sourceMappingURL=navigation-drawer-modal-styles.css.js.map