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

package/navigationbar/harness.d.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,oBAAoB,EAAC,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;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 {NavigationTabHarness} from '../navigationtab/harness.js';\nimport {Harness} from '../testing/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.scss

@@ -1,66 +0,0 @@
-//
-// 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 '../../elevation/lib/elevation';
-@use '../../sass/theme';
-@use '../../tokens';
-
-@mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    tokens.md-comp-navigation-bar-values(),
-    $tokens
-  );
-  $tokens: elevation.resolve-tokens($tokens, 'container-elevation');
-  $tokens: theme.create-theme-vars($tokens, 'navigation-bar');
-
-  @include theme.emit-theme-vars($tokens);
-}
-
-@mixin styles() {
-  $tokens: tokens.md-comp-navigation-bar-values();
-  $tokens: elevation.resolve-tokens($tokens, 'container-elevation');
-
-  $tokens: theme.create-theme-vars($tokens, 'navigation-bar');
-
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
-    }
-
-    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);
-
-    @include elevation.theme(
-      (
-        duration: 280ms,
-        level: var(--_container-elevation),
-        shadow-color: var(--_container-shadow-color),
-        surface-tint-color: var(--_container-surface-tint-layer-color),
-      )
-    );
-
-    .md3-navigation-bar__tabs-slot-container {
-      display: inherit;
-      width: inherit;
-    }
-  }
-
-  md-elevation {
-    inset: 0;
-    position: absolute;
-    z-index: 0;
-  }
-}

package/navigationbar/lib/constants.d.ts

@@ -1,17 +0,0 @@
-/**
- * @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 declare type NavigationTabInteractionEvent = CustomEvent<MDCNavigationTabInteractionEventDetail>;

package/navigationbar/lib/navigation-bar-styles.css.js

@@ -1,9 +0,0 @@
-/**
-  * @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, #1c1b1f));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_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, #1c1b1f));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_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, #1c1b1f));--_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, #1c1b1f));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_badge-color: var(--md-navigation-bar-badge-color, var(--md-sys-color-error, #b3261e));--_badge-shape: var(--md-navigation-bar-badge-shape, 3px);--_badge-size: var(--md-navigation-bar-badge-size, 6px);--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface, #fffbfe));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shadow-color: var(--md-navigation-bar-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-navigation-bar-container-shape, 0px);--_container-surface-tint-layer-color: var(--md-navigation-bar-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_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, #1c1b1f));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_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, #1c1b1f));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_label-text-font: var(--md-navigation-bar-label-text-font, 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 Roboto);--_label-text-weight: var(--md-navigation-bar-label-text-weight, 500);--_large-badge-color: var(--md-navigation-bar-large-badge-color, var(--md-sys-color-error, #b3261e));--_large-badge-shape: var(--md-navigation-bar-large-badge-shape, 8px);--_large-badge-size: var(--md-navigation-bar-large-badge-size, 16px);--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);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);--md-elevation-duration:280ms;--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-elevation-surface-tint-color:var(--_container-surface-tint-layer-color)}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{inset:0;position:absolute;z-index:0}/*# sourceMappingURL=navigation-bar-styles.css.map */
-`;
-//# sourceMappingURL=navigation-bar-styles.css.js.map

package/navigationbar/lib/navigation-bar-styles.css.js.map

@@ -1 +0,0 @@
-{"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, #1c1b1f));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_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, #1c1b1f));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_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, #1c1b1f));--_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, #1c1b1f));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_badge-color: var(--md-navigation-bar-badge-color, var(--md-sys-color-error, #b3261e));--_badge-shape: var(--md-navigation-bar-badge-shape, 3px);--_badge-size: var(--md-navigation-bar-badge-size, 6px);--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface, #fffbfe));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shadow-color: var(--md-navigation-bar-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-navigation-bar-container-shape, 0px);--_container-surface-tint-layer-color: var(--md-navigation-bar-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_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, #1c1b1f));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_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, #1c1b1f));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_label-text-font: var(--md-navigation-bar-label-text-font, 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 Roboto);--_label-text-weight: var(--md-navigation-bar-label-text-weight, 500);--_large-badge-color: var(--md-navigation-bar-large-badge-color, var(--md-sys-color-error, #b3261e));--_large-badge-shape: var(--md-navigation-bar-large-badge-shape, 8px);--_large-badge-size: var(--md-navigation-bar-large-badge-size, 16px);--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);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);--md-elevation-duration:280ms;--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-elevation-surface-tint-color:var(--_container-surface-tint-layer-color)}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{inset:0;position:absolute;z-index:0}/*# sourceMappingURL=navigation-bar-styles.css.map */\n`;\n "]}

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

@@ -1,8 +0,0 @@
-//
-// Copyright 2021 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@use './navigation-bar';
-
-@include navigation-bar.styles;

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

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

package/navigationbar/lib/navigation-bar.js

@@ -1,141 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { __decorate, __metadata } from "tslib";
-import '../../elevation/elevation.js';
-import { html, LitElement } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { isRtl } from '../../controller/is-rtl.js';
-import { ariaProperty } from '../../decorators/aria-property.js';
-/** @soyCompatible */
-export class NavigationBar extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.activeIndex = 0;
-        this.hideInactiveLabels = false;
-        this.tabs = [];
-    }
-    /** @soyTemplate */
-    render() {
-        return html `<div class="md3-navigation-bar"
-            role="tablist"
-            aria-label="${ifDefined(this.ariaLabel || undefined)}"
-            @keydown="${this.handleKeydown}"
-            @navigation-tab-interaction="${this.handleNavigationTabInteraction}"
-            @navigation-tab-rendered=${this.handleNavigationTabConnected}
-          ><md-elevation shadow surface
-          ></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;
-        }
-    }
-}
-__decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
-], NavigationBar.prototype, "activeIndex", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], NavigationBar.prototype, "hideInactiveLabels", void 0);
-__decorate([
-    queryAssignedElements({ flatten: true }),
-    __metadata("design:type", Array)
-], NavigationBar.prototype, "tabsElement", void 0);
-__decorate([
-    ariaProperty,
-    property({ attribute: 'data-aria-label', noAccessor: true }),
-    __metadata("design:type", String)
-], NavigationBar.prototype, "ariaLabel", void 0);
-//# sourceMappingURL=navigation-bar.js.map

package/navigationbar/lib/navigation-bar.js.map

@@ -1 +0,0 @@
-{"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, PropertyValues, TemplateResult} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {isRtl} from '../../controller/is-rtl.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {NavigationTab} from '../../navigationtab/lib/navigation-tab.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}) activeIndex = 0;\n\n  @property({type: Boolean}) hideInactiveLabels = false;\n\n  tabs: NavigationTab[] = [];\n\n  @queryAssignedElements({flatten: true})\n  protected tabsElement!: NavigationTab[];\n\n  // tslint:disable-next-line:no-new-decorators\n  @ariaProperty\n  @property({attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel!: string;\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`<div class=\"md3-navigation-bar\"\n            role=\"tablist\"\n            aria-label=\"${ifDefined(this.ariaLabel || undefined)}\"\n            @keydown=\"${this.handleKeydown}\"\n            @navigation-tab-interaction=\"${this.handleNavigationTabInteraction}\"\n            @navigation-tab-rendered=${this.handleNavigationTabConnected}\n          ><md-elevation shadow surface\n          ></md-elevation><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/navigationbar/navigation-bar.d.ts

@@ -1,19 +0,0 @@
-/**
- * @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

@@ -1,22 +0,0 @@
-/**
- * @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

@@ -1 +0,0 @@
-{"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/lib/_navigation-drawer-modal.scss

@@ -1,105 +0,0 @@
-//
-// 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 'sass:map';
-@use '../../elevation/elevation';
-@use '../../motion/animation';
-@use '../../sass/theme';
-@use './shared';
-
-$_curve: animation.$standard-easing;
-$_delay: 0s;
-$_transition-duration: 0.25s;
-
-$_reference: (
-  container-color: #fff,
-  container-height: 100%,
-  container-shape: 0 16px 16px 0,
-  container-surface-tint-layer-color: null,
-  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,
-);
-
-@mixin theme($tokens) {
-  $tokens: theme.validate-theme($_reference, $tokens);
-  $tokens: shared.resolve-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, 'navigation-drawer-modal');
-
-  @include theme.emit-theme-vars($tokens);
-}
-
-@mixin styles() {
-  $tokens: $_reference;
-  $tokens: shared.resolve-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, 'navigation-drawer-modal');
-
-  :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/navigationdrawer/lib/_navigation-drawer.scss

@@ -1,100 +0,0 @@
-//
-// 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 '../../motion/animation';
-@use '../../elevation/elevation';
-@use '../../sass/theme';
-@use './shared';
-
-$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-surface-tint-layer-color: null,
-  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,
-);
-
-@mixin theme($tokens) {
-  $tokens: theme.validate-theme($_reference, $tokens);
-  $tokens: shared.resolve-tokens($tokens);
-
-  $tokens: theme.create-theme-vars($tokens, 'navigation-drawer');
-
-  @include theme.emit-theme-vars($tokens);
-}
-
-@mixin styles() {
-  $tokens: $_reference;
-  $tokens: shared.resolve-tokens($tokens);
-
-  $tokens: theme.create-theme-vars($tokens, 'navigation-drawer');
-
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
-    }
-
-    @include elevation.theme(
-      (
-        level: var(--_standard-container-elevation),
-        shadow-color: var(--_divider-color),
-        surface-tint-color: var(--_container-surface-tint-layer-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 {
-    inset: 0;
-    position: absolute;
-    width: inherit;
-    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/navigationdrawer/lib/_shared.scss

@@ -1,44 +0,0 @@
-//
-// 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 'sass:map';
-
-@use '../../elevation/lib/elevation';
-@use '../../sass/resolvers';
-@use '../../sass/shape';
-
-@mixin styles() {
-  .md3-navigation-drawer-modal {
-    background-color: var(--_container-color);
-    border-start-start-radius: var(--_container-shape-start-start);
-    border-start-end-radius: var(--_container-shape-start-end);
-    border-end-end-radius: var(--_container-shape-end-end);
-    border-end-start-radius: var(--_container-shape-end-start);
-    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);
-    }
-  }
-}
-
-@function resolve-tokens($tokens) {
-  $tokens: elevation.resolve-tokens($tokens, 'modal-container-elevation');
-  $tokens: shape.resolve-theme(
-    $tokens,
-    map.get(resolvers.$material, shape),
-    container-shape
-  );
-
-  @return $tokens;
-}