@material/web 1.0.0-pre.12 → 1.0.0-pre.14

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

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

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

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

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

@@ -3,7 +3,7 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { NavigationBar } from './lib/navigation-bar.js';
+import { NavigationBar } from './internal/navigation-bar.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-navigation-bar': MdNavigationBar;

package/labs/navigationbar/navigation-bar.js

@@ -5,8 +5,8 @@
  */
 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';
+import { NavigationBar } from './internal/navigation-bar.js';
+import { styles } from './internal/navigation-bar-styles.css.js';
 /**
  * @final
  * @suppress {visibility}

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

@@ -1 +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"]}
+{"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,8BAA8B,CAAC;AAC3D,OAAO,EAAC,MAAM,EAAC,MAAM,yCAAyC,CAAC;AAQ/D;;;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 './internal/navigation-bar.js';\nimport {styles} from './internal/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/_navigation-drawer-modal.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/navigation-drawer-modal' show theme;
+@forward './internal/navigation-drawer-modal' show theme;

package/labs/navigationdrawer/_navigation-drawer.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/navigation-drawer' show theme;
+@forward './internal/navigation-drawer' show theme;

package/labs/navigationdrawer/internal/navigation-drawer-modal.js

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var _a;
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { requestUpdateOnAriaChange } from '../../../internal/aria/delegate.js';
+/**
+ * TODO(b/265346501): add docs
+ */
+export class NavigationDrawerModal extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.opened = false;
+        this.pivot = 'end';
+    }
+    render() {
+        const ariaExpanded = this.opened ? 'true' : 'false';
+        const ariaHidden = !this.opened ? 'true' : 'false';
+        // Needed for closure conformance
+        const { ariaLabel, ariaModal } = this;
+        return html `
+      <div
+        class="md3-navigation-drawer-modal__scrim ${this.getScrimClasses()}"
+        @click="${this.handleScrimClick}">
+      </div>
+      <div
+        aria-expanded=${ariaExpanded}
+        aria-hidden=${ariaHidden}
+        aria-label=${ariaLabel || nothing}
+        aria-modal=${ariaModal || nothing}
+        class="md3-navigation-drawer-modal ${this.getRenderClasses()}"
+        @keydown="${this.handleKeyDown}"
+        role="dialog"><div class="md3-elevation-overlay"
+        ></div>
+        <div class="md3-navigation-drawer-modal__slot-content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+    getScrimClasses() {
+        return classMap({
+            'md3-navigation-drawer-modal--scrim-visible': this.opened,
+        });
+    }
+    getRenderClasses() {
+        return classMap({
+            'md3-navigation-drawer-modal--opened': this.opened,
+            'md3-navigation-drawer-modal--pivot-at-start': this.pivot === 'start',
+        });
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('opened')) {
+            setTimeout(() => {
+                this.dispatchEvent(new CustomEvent('navigation-drawer-changed', { detail: { opened: this.opened }, bubbles: true, composed: true }));
+            }, 250);
+        }
+    }
+    handleKeyDown(event) {
+        if (event.code === 'Escape') {
+            this.opened = false;
+        }
+    }
+    handleScrimClick() {
+        this.opened = !this.opened;
+    }
+}
+_a = NavigationDrawerModal;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
+__decorate([
+    property({ type: Boolean })
+], NavigationDrawerModal.prototype, "opened", void 0);
+__decorate([
+    property()
+], NavigationDrawerModal.prototype, "pivot", void 0);
+//# sourceMappingURL=navigation-drawer-modal.js.map

package/labs/navigationdrawer/internal/navigation-drawer-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-drawer-modal.js","sourceRoot":"","sources":["navigation-drawer-modal.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,OAAO,EAAC,yBAAyB,EAAC,MAAM,oCAAoC,CAAC;AAE7E;;GAEG;AACH,MAAM,OAAO,qBAAsB,SAAQ,UAAU;IAArD;;QAK6B,WAAM,GAAG,KAAK,CAAC;QAC9B,UAAK,GAAkB,KAAK,CAAC;IA6D3C,CAAC;IA3DoB,MAAM;QACvB,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACpD,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACnD,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAE,SAAS,EAAC,GAAG,IAAuB,CAAC;QACvD,OAAO,IAAI,CAAA;;oDAEqC,IAAI,CAAC,eAAe,EAAE;kBACxD,IAAI,CAAC,gBAAgB;;;wBAGf,YAAY;sBACd,UAAU;qBACX,SAAS,IAAI,OAAO;qBACpB,SAAS,IAAI,OAAO;6CACI,IAAI,CAAC,gBAAgB,EAAE;oBAChD,IAAI,CAAC,aAAa;;;;;;;KAOjC,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,OAAO,QAAQ,CAAC;YACd,4CAA4C,EAAE,IAAI,CAAC,MAAM;SAC1D,CAAC,CAAC;IACL,CAAC;IAEO,gBAAgB;QACtB,OAAO,QAAQ,CAAC;YACd,qCAAqC,EAAE,IAAI,CAAC,MAAM;YAClD,6CAA6C,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;SACtE,CAAC,CAAC;IACL,CAAC;IAEkB,OAAO,CAAC,iBACyC;QAClE,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACnC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAC9B,2BAA2B,EAC3B,EAAC,MAAM,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;YACvE,CAAC,EAAE,GAAG,CAAC,CAAC;SACT;IACH,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;YAC3B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SACrB;IACH,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC;CACF;;AAlEC;IACE,yBAAyB,CAAC,EAAI,CAAC,CAAC;AAClC,CAAC,GAAA,CAAA;AAE0B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;qDAAgB;AAC9B;IAAX,QAAQ,EAAE;oDAA8B","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';\n\n/**\n * TODO(b/265346501): add docs\n */\nexport class NavigationDrawerModal extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  @property({type: Boolean}) opened = false;\n  @property() pivot: 'start'|'end' = 'end';\n\n  protected override render() {\n    const ariaExpanded = this.opened ? 'true' : 'false';\n    const ariaHidden = !this.opened ? 'true' : 'false';\n    // Needed for closure conformance\n    const {ariaLabel, ariaModal} = this as ARIAMixinStrict;\n    return html`\n      <div\n        class=\"md3-navigation-drawer-modal__scrim ${this.getScrimClasses()}\"\n        @click=\"${this.handleScrimClick}\">\n      </div>\n      <div\n        aria-expanded=${ariaExpanded}\n        aria-hidden=${ariaHidden}\n        aria-label=${ariaLabel || nothing}\n        aria-modal=${ariaModal || nothing}\n        class=\"md3-navigation-drawer-modal ${this.getRenderClasses()}\"\n        @keydown=\"${this.handleKeyDown}\"\n        role=\"dialog\"><div class=\"md3-elevation-overlay\"\n        ></div>\n        <div class=\"md3-navigation-drawer-modal__slot-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private getScrimClasses() {\n    return classMap({\n      'md3-navigation-drawer-modal--scrim-visible': this.opened,\n    });\n  }\n\n  private getRenderClasses() {\n    return classMap({\n      'md3-navigation-drawer-modal--opened': this.opened,\n      'md3-navigation-drawer-modal--pivot-at-start': this.pivot === 'start',\n    });\n  }\n\n  protected override updated(changedProperties:\n                                 PropertyValues<NavigationDrawerModal>) {\n    if (changedProperties.has('opened')) {\n      setTimeout(() => {\n        this.dispatchEvent(new CustomEvent(\n            'navigation-drawer-changed',\n            {detail: {opened: this.opened}, bubbles: true, composed: true}));\n      }, 250);\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.code === 'Escape') {\n      this.opened = false;\n    }\n  }\n\n  private handleScrimClick() {\n    this.opened = !this.opened;\n  }\n}\n"]}

package/labs/navigationdrawer/navigation-drawer-modal.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { NavigationDrawerModal } from './lib/navigation-drawer-modal.js';
+import { NavigationDrawerModal } from './internal/navigation-drawer-modal.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-navigation-drawer-modal': MdNavigationDrawerModal;

package/labs/navigationdrawer/navigation-drawer-modal.js

@@ -5,9 +5,9 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { NavigationDrawerModal } from './lib/navigation-drawer-modal.js';
-import { styles } from './lib/navigation-drawer-modal-styles.css.js';
-import { styles as sharedStyles } from './lib/shared-styles.css.js';
+import { NavigationDrawerModal } from './internal/navigation-drawer-modal.js';
+import { styles } from './internal/navigation-drawer-modal-styles.css.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
 /**
  * @final
  * @suppress {visibility}

package/labs/navigationdrawer/navigation-drawer-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-drawer-modal.js","sourceRoot":"","sources":["navigation-drawer-modal.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,qBAAqB,EAAC,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAC,MAAM,EAAC,MAAM,6CAA6C,CAAC;AACnE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;GAGG;AAEI,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,qBAAqB;;AACvC,8BAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAD9C,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CAEnC;SAFY,uBAAuB","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 {NavigationDrawerModal} from './lib/navigation-drawer-modal.js';\nimport {styles} from './lib/navigation-drawer-modal-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-drawer-modal': MdNavigationDrawerModal;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-navigation-drawer-modal')\nexport class MdNavigationDrawerModal extends NavigationDrawerModal {\n  static override readonly styles = [sharedStyles, styles];\n}\n"]}
+{"version":3,"file":"navigation-drawer-modal.js","sourceRoot":"","sources":["navigation-drawer-modal.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,qBAAqB,EAAC,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAAC,MAAM,EAAC,MAAM,kDAAkD,CAAC;AACxE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;GAGG;AAEI,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,qBAAqB;;AACvC,8BAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAD9C,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CAEnC;SAFY,uBAAuB","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 {NavigationDrawerModal} from './internal/navigation-drawer-modal.js';\nimport {styles} from './internal/navigation-drawer-modal-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-drawer-modal': MdNavigationDrawerModal;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-navigation-drawer-modal')\nexport class MdNavigationDrawerModal extends NavigationDrawerModal {\n  static override readonly styles = [sharedStyles, styles];\n}\n"]}

package/labs/navigationdrawer/navigation-drawer.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { NavigationDrawer } from './lib/navigation-drawer.js';
+import { NavigationDrawer } from './internal/navigation-drawer.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-navigation-drawer': MdNavigationDrawer;

package/labs/navigationdrawer/navigation-drawer.js

@@ -5,9 +5,9 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { NavigationDrawer } from './lib/navigation-drawer.js';
-import { styles } from './lib/navigation-drawer-styles.css.js';
-import { styles as sharedStyles } from './lib/shared-styles.css.js';
+import { NavigationDrawer } from './internal/navigation-drawer.js';
+import { styles } from './internal/navigation-drawer-styles.css.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
 /**
  * @final
  * @suppress {visibility}

package/labs/navigationdrawer/navigation-drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-drawer.js","sourceRoot":"","sources":["navigation-drawer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,gBAAgB,EAAC,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,uCAAuC,CAAC;AAC7D,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;GAGG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,gBAAgB;;AAC7B,yBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAD9C,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAE9B;SAFY,kBAAkB","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 {NavigationDrawer} from './lib/navigation-drawer.js';\nimport {styles} from './lib/navigation-drawer-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-drawer': MdNavigationDrawer;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-navigation-drawer')\nexport class MdNavigationDrawer extends NavigationDrawer {\n  static override readonly styles = [sharedStyles, styles];\n}\n"]}
+{"version":3,"file":"navigation-drawer.js","sourceRoot":"","sources":["navigation-drawer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAC,MAAM,EAAC,MAAM,4CAA4C,CAAC;AAClE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;GAGG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,gBAAgB;;AAC7B,yBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAD9C,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAE9B;SAFY,kBAAkB","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 {NavigationDrawer} from './internal/navigation-drawer.js';\nimport {styles} from './internal/navigation-drawer-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-drawer': MdNavigationDrawer;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-navigation-drawer')\nexport class MdNavigationDrawer extends NavigationDrawer {\n  static override readonly styles = [sharedStyles, styles];\n}\n"]}

package/labs/navigationtab/_navigation-tab.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/navigation-tab' show theme;
+@forward './internal/navigation-tab' show theme;

package/labs/navigationtab/harness.d.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../../testing/harness.js';
-import { NavigationTab } from './lib/navigation-tab.js';
+import { NavigationTab } from './internal/navigation-tab.js';
 /**
  * Test harness for navigation tab elements.
  */

package/labs/navigationtab/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,0BAA0B,CAAC;AAIjD;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,OAAsB;IACrD,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CACnD,CAAC;IAClB,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';\n\nimport {NavigationTab} from './lib/navigation-tab.js';\n\n/**\n * Test harness for navigation tab elements.\n */\nexport class NavigationTabHarness extends Harness<NavigationTab> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.md3-navigation-tab') as\n        HTMLElement;\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,0BAA0B,CAAC;AAIjD;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,OAAsB;IACrD,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CACnD,CAAC;IAClB,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';\n\nimport {NavigationTab} from './internal/navigation-tab.js';\n\n/**\n * Test harness for navigation tab elements.\n */\nexport class NavigationTabHarness extends Harness<NavigationTab> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.md3-navigation-tab') as\n        HTMLElement;\n  }\n}\n"]}

package/labs/navigationtab/internal/_navigation-tab.scss

@@ -0,0 +1,259 @@
+//
+// 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 '../../../focus/focus-ring';
+@use '../../../internal/motion/animation';
+@use '../../../internal/sass/theme';
+@use '../../../ripple/ripple';
+@use '../../../tokens';
+@use '../../badge/badge';
+// go/keep-sorted end
+
+$animation-duration: 100ms;
+$_custom-property-prefix: 'navigation-bar';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(
+    tokens.md-comp-navigation-bar-values(),
+    $tokens
+  );
+
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-navigation-bar-values();
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    display: flex;
+    flex-grow: 1;
+  }
+
+  md-focus-ring {
+    @include focus-ring.theme(
+      (
+        'shape': map.get(tokens.md-sys-shape-values(), 'corner-small'),
+        'inward-offset': -1px,
+      )
+    );
+  }
+
+  .md3-navigation-tab {
+    align-items: center;
+    appearance: none;
+    background: none;
+    border: none;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+    min-height: 48px;
+    min-width: 48px;
+    outline: none;
+    padding: 8px 0px 12px;
+    position: relative;
+    text-align: center;
+    width: 100%;
+    font: var(--_label-text-type);
+
+    // Firefox draws a dotted border around focused buttons unless specifically overridden.
+    &::-moz-focus-inner {
+      border: 0;
+      padding: 0;
+    }
+  }
+
+  .md3-navigation-tab__icon-content {
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    position: relative;
+    z-index: 1;
+  }
+
+  .md3-navigation-tab__label-text {
+    height: 16px;
+    margin-top: 4px;
+    opacity: 1;
+    transition: animation.standard(opacity, $animation-duration),
+      animation.standard(height, $animation-duration);
+    z-index: 1;
+
+    .md3-navigation-tab--hide-inactive-label:not(.md3-navigation-tab--active)
+      & {
+      height: 0;
+      opacity: 0;
+    }
+  }
+
+  .md3-navigation-tab__active-indicator {
+    display: flex;
+    justify-content: center;
+    opacity: 0;
+    position: absolute;
+    transition: animation.standard(width, $animation-duration),
+      animation.standard(opacity, $animation-duration);
+    width: 32px;
+    background-color: var(--_active-indicator-color);
+    border-radius: var(--_active-indicator-shape);
+
+    .md3-navigation-tab--active & {
+      opacity: 1;
+    }
+  }
+
+  // Keep icon-content in sync with active-indicator size.
+  .md3-navigation-tab__active-indicator,
+  .md3-navigation-tab__icon-content {
+    height: var(--_active-indicator-height);
+  }
+
+  // Keep icon-content in sync with active-indicator size.
+  .md3-navigation-tab--active .md3-navigation-tab__active-indicator,
+  .md3-navigation-tab__icon-content {
+    width: var(--_active-indicator-width);
+  }
+
+  .md3-navigation-tab__icon {
+    fill: currentColor;
+    align-self: center;
+    display: inline-block;
+    position: relative;
+    width: var(--_icon-size);
+    height: var(--_icon-size);
+    font-size: var(--_icon-size);
+
+    &.md3-navigation-tab__icon--active {
+      display: none;
+    }
+
+    .md3-navigation-tab--active & {
+      display: none;
+
+      &.md3-navigation-tab__icon--active {
+        display: inline-block;
+      }
+    }
+  }
+
+  .md3-navigation-tab__ripple {
+    z-index: 0;
+  }
+
+  .md3-navigation-tab--active {
+    .md3-navigation-tab__icon {
+      color: var(--_active-icon-color);
+    }
+
+    .md3-navigation-tab__label-text {
+      color: var(--_active-label-text-color);
+    }
+
+    &:hover {
+      .md3-navigation-tab__icon {
+        color: var(--_active-hover-icon-color);
+      }
+
+      .md3-navigation-tab__label-text {
+        color: var(--_active-hover-label-text-color);
+      }
+    }
+
+    &:focus {
+      .md3-navigation-tab__icon {
+        color: var(--_active-focus-icon-color);
+      }
+
+      .md3-navigation-tab__label-text {
+        color: var(--_active-focus-label-text-color);
+      }
+    }
+
+    &:active {
+      .md3-navigation-tab__icon {
+        color: var(--_active-pressed-icon-color);
+      }
+
+      .md3-navigation-tab__label-text {
+        color: var(--_active-pressed-label-text-color);
+      }
+    }
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_active-hover-state-layer-color),
+        pressed-color: var(--_active-pressed-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  .md3-navigation-tab:not(.md3-navigation-tab--active) {
+    .md3-navigation-tab__icon {
+      color: var(--_inactive-icon-color);
+    }
+
+    .md3-navigation-tab__label-text {
+      color: var(--_inactive-label-text-color);
+    }
+
+    &:hover {
+      .md3-navigation-tab__icon {
+        color: var(--_inactive-hover-icon-color);
+      }
+
+      .md3-navigation-tab__label-text {
+        color: var(--_inactive-hover-label-text-color);
+      }
+    }
+
+    &:focus {
+      .md3-navigation-tab__icon {
+        color: var(--_inactive-focus-icon-color);
+      }
+
+      .md3-navigation-tab__label-text {
+        color: var(--_inactive-focus-label-text-color);
+      }
+    }
+
+    &:active {
+      .md3-navigation-tab__icon {
+        color: var(--_inactive-pressed-icon-color);
+      }
+
+      .md3-navigation-tab__label-text {
+        color: var(--_inactive-pressed-label-text-color);
+      }
+    }
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_inactive-hover-state-layer-color),
+        pressed-color: var(--_inactive-pressed-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+  }
+}

package/labs/navigationtab/internal/navigation-tab-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);display:flex;flex-grow:1}md-focus-ring{--md-focus-ring-shape: 8px;--md-focus-ring-inward-offset: -1px}.md3-navigation-tab{align-items:center;appearance:none;background:none;border:none;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:48px;min-width:48px;outline:none;padding:8px 0px 12px;position:relative;text-align:center;width:100%;font:var(--_label-text-type)}.md3-navigation-tab::-moz-focus-inner{border:0;padding:0}.md3-navigation-tab__icon-content{align-items:center;box-sizing:border-box;display:flex;justify-content:center;position:relative;z-index:1}.md3-navigation-tab__label-text{height:16px;margin-top:4px;opacity:1;transition:opacity 100ms cubic-bezier(0.4, 0, 0.2, 1),height 100ms cubic-bezier(0.4, 0, 0.2, 1);z-index:1}.md3-navigation-tab--hide-inactive-label:not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{height:0;opacity:0}.md3-navigation-tab__active-indicator{display:flex;justify-content:center;opacity:0;position:absolute;transition:width 100ms cubic-bezier(0.4, 0, 0.2, 1),opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);width:32px;background-color:var(--_active-indicator-color);border-radius:var(--_active-indicator-shape)}.md3-navigation-tab--active .md3-navigation-tab__active-indicator{opacity:1}.md3-navigation-tab__active-indicator,.md3-navigation-tab__icon-content{height:var(--_active-indicator-height)}.md3-navigation-tab--active .md3-navigation-tab__active-indicator,.md3-navigation-tab__icon-content{width:var(--_active-indicator-width)}.md3-navigation-tab__icon{fill:currentColor;align-self:center;display:inline-block;position:relative;width:var(--_icon-size);height:var(--_icon-size);font-size:var(--_icon-size)}.md3-navigation-tab__icon.md3-navigation-tab__icon--active{display:none}.md3-navigation-tab--active .md3-navigation-tab__icon{display:none}.md3-navigation-tab--active .md3-navigation-tab__icon.md3-navigation-tab__icon--active{display:inline-block}.md3-navigation-tab__ripple{z-index:0}.md3-navigation-tab--active{--md-ripple-hover-color: var(--_active-hover-state-layer-color);--md-ripple-pressed-color: var(--_active-pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.md3-navigation-tab--active .md3-navigation-tab__icon{color:var(--_active-icon-color)}.md3-navigation-tab--active .md3-navigation-tab__label-text{color:var(--_active-label-text-color)}.md3-navigation-tab--active:hover .md3-navigation-tab__icon{color:var(--_active-hover-icon-color)}.md3-navigation-tab--active:hover .md3-navigation-tab__label-text{color:var(--_active-hover-label-text-color)}.md3-navigation-tab--active:focus .md3-navigation-tab__icon{color:var(--_active-focus-icon-color)}.md3-navigation-tab--active:focus .md3-navigation-tab__label-text{color:var(--_active-focus-label-text-color)}.md3-navigation-tab--active:active .md3-navigation-tab__icon{color:var(--_active-pressed-icon-color)}.md3-navigation-tab--active:active .md3-navigation-tab__label-text{color:var(--_active-pressed-label-text-color)}.md3-navigation-tab:not(.md3-navigation-tab--active){--md-ripple-hover-color: var(--_inactive-hover-state-layer-color);--md-ripple-pressed-color: var(--_inactive-pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.md3-navigation-tab:not(.md3-navigation-tab--active) .md3-navigation-tab__icon{color:var(--_inactive-icon-color)}.md3-navigation-tab:not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{color:var(--_inactive-label-text-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):hover .md3-navigation-tab__icon{color:var(--_inactive-hover-icon-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):hover .md3-navigation-tab__label-text{color:var(--_inactive-hover-label-text-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):focus .md3-navigation-tab__icon{color:var(--_inactive-focus-icon-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):focus .md3-navigation-tab__label-text{color:var(--_inactive-focus-label-text-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):active .md3-navigation-tab__icon{color:var(--_inactive-pressed-icon-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):active .md3-navigation-tab__label-text{color:var(--_inactive-pressed-label-text-color)}/*# sourceMappingURL=navigation-tab-styles.css.map */
+`;
+//# sourceMappingURL=navigation-tab-styles.css.js.map

package/labs/navigationtab/internal/navigation-tab-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-tab-styles.css.js","sourceRoot":"","sources":["navigation-tab-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);display:flex;flex-grow:1}md-focus-ring{--md-focus-ring-shape: 8px;--md-focus-ring-inward-offset: -1px}.md3-navigation-tab{align-items:center;appearance:none;background:none;border:none;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:48px;min-width:48px;outline:none;padding:8px 0px 12px;position:relative;text-align:center;width:100%;font:var(--_label-text-type)}.md3-navigation-tab::-moz-focus-inner{border:0;padding:0}.md3-navigation-tab__icon-content{align-items:center;box-sizing:border-box;display:flex;justify-content:center;position:relative;z-index:1}.md3-navigation-tab__label-text{height:16px;margin-top:4px;opacity:1;transition:opacity 100ms cubic-bezier(0.4, 0, 0.2, 1),height 100ms cubic-bezier(0.4, 0, 0.2, 1);z-index:1}.md3-navigation-tab--hide-inactive-label:not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{height:0;opacity:0}.md3-navigation-tab__active-indicator{display:flex;justify-content:center;opacity:0;position:absolute;transition:width 100ms cubic-bezier(0.4, 0, 0.2, 1),opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);width:32px;background-color:var(--_active-indicator-color);border-radius:var(--_active-indicator-shape)}.md3-navigation-tab--active .md3-navigation-tab__active-indicator{opacity:1}.md3-navigation-tab__active-indicator,.md3-navigation-tab__icon-content{height:var(--_active-indicator-height)}.md3-navigation-tab--active .md3-navigation-tab__active-indicator,.md3-navigation-tab__icon-content{width:var(--_active-indicator-width)}.md3-navigation-tab__icon{fill:currentColor;align-self:center;display:inline-block;position:relative;width:var(--_icon-size);height:var(--_icon-size);font-size:var(--_icon-size)}.md3-navigation-tab__icon.md3-navigation-tab__icon--active{display:none}.md3-navigation-tab--active .md3-navigation-tab__icon{display:none}.md3-navigation-tab--active .md3-navigation-tab__icon.md3-navigation-tab__icon--active{display:inline-block}.md3-navigation-tab__ripple{z-index:0}.md3-navigation-tab--active{--md-ripple-hover-color: var(--_active-hover-state-layer-color);--md-ripple-pressed-color: var(--_active-pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.md3-navigation-tab--active .md3-navigation-tab__icon{color:var(--_active-icon-color)}.md3-navigation-tab--active .md3-navigation-tab__label-text{color:var(--_active-label-text-color)}.md3-navigation-tab--active:hover .md3-navigation-tab__icon{color:var(--_active-hover-icon-color)}.md3-navigation-tab--active:hover .md3-navigation-tab__label-text{color:var(--_active-hover-label-text-color)}.md3-navigation-tab--active:focus .md3-navigation-tab__icon{color:var(--_active-focus-icon-color)}.md3-navigation-tab--active:focus .md3-navigation-tab__label-text{color:var(--_active-focus-label-text-color)}.md3-navigation-tab--active:active .md3-navigation-tab__icon{color:var(--_active-pressed-icon-color)}.md3-navigation-tab--active:active .md3-navigation-tab__label-text{color:var(--_active-pressed-label-text-color)}.md3-navigation-tab:not(.md3-navigation-tab--active){--md-ripple-hover-color: var(--_inactive-hover-state-layer-color);--md-ripple-pressed-color: var(--_inactive-pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.md3-navigation-tab:not(.md3-navigation-tab--active) .md3-navigation-tab__icon{color:var(--_inactive-icon-color)}.md3-navigation-tab:not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{color:var(--_inactive-label-text-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):hover .md3-navigation-tab__icon{color:var(--_inactive-hover-icon-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):hover .md3-navigation-tab__label-text{color:var(--_inactive-hover-label-text-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):focus .md3-navigation-tab__icon{color:var(--_inactive-focus-icon-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):focus .md3-navigation-tab__label-text{color:var(--_inactive-focus-label-text-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):active .md3-navigation-tab__icon{color:var(--_inactive-pressed-icon-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):active .md3-navigation-tab__label-text{color:var(--_inactive-pressed-label-text-color)}/*# sourceMappingURL=navigation-tab-styles.css.map */\n`;\n "]}

package/labs/navigationtab/internal/navigation-tab.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../../focus/md-focus-ring.js';
+import '../../../ripple/ripple.js';
+import '../../badge/badge.js';
+import { LitElement, PropertyValues } from 'lit';
+import { NavigationTabState } from './state.js';
+/**
+ * TODO(b/265346501): add docs
+ */
+export declare class NavigationTab extends LitElement implements NavigationTabState {
+    disabled: boolean;
+    active: boolean;
+    hideInactiveLabel: boolean;
+    label?: string;
+    badgeValue: string;
+    showBadge: boolean;
+    buttonElement: HTMLElement | null;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private getRenderClasses;
+    private renderBadge;
+    private renderLabel;
+    firstUpdated(changedProperties: PropertyValues): void;
+    focus(): void;
+    blur(): void;
+    handleClick(): void;
+}