material-web-evo 10002.10001.10000

package/labs/navigationdrawer/internal/shared-styles.scss

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

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

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { NavigationDrawerModal } from './internal/navigation-drawer-modal.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-navigation-drawer-modal': MdNavigationDrawerModal;
+    }
+}
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdNavigationDrawerModal extends NavigationDrawerModal {
+    static readonly styles: import("lit").CSSResult[];
+}

package/labs/navigationdrawer/navigation-drawer-modal.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 { NavigationDrawerModal } from './internal/navigation-drawer-modal.js';
+import { styles } from './internal/navigation-drawer-modal-styles.js';
+import { styles as sharedStyles } from './internal/shared-styles.js';
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export let MdNavigationDrawerModal = class MdNavigationDrawerModal extends NavigationDrawerModal {
+};
+MdNavigationDrawerModal.styles = [sharedStyles, styles];
+MdNavigationDrawerModal = __decorate([
+    customElement('md-navigation-drawer-modal')
+], MdNavigationDrawerModal);
+//# sourceMappingURL=navigation-drawer-modal.js.map

package/labs/navigationdrawer/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,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,qBAAqB,EAAC,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAAC,MAAM,EAAC,MAAM,8CAA8C,CAAC;AACpE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,6BAA6B,CAAC;AAQnE;;;GAGG;AAEI,WAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,qBAAqB;;AACvC,8BAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,AAAzB,CAA0B;AAD9C,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CAEnC","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.js';\nimport {styles as sharedStyles} from './internal/shared-styles.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

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

package/labs/navigationdrawer/navigation-drawer.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 { NavigationDrawer } from './internal/navigation-drawer.js';
+import { styles } from './internal/navigation-drawer-styles.js';
+import { styles as sharedStyles } from './internal/shared-styles.js';
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export let MdNavigationDrawer = class MdNavigationDrawer extends NavigationDrawer {
+};
+MdNavigationDrawer.styles = [sharedStyles, styles];
+MdNavigationDrawer = __decorate([
+    customElement('md-navigation-drawer')
+], MdNavigationDrawer);
+//# sourceMappingURL=navigation-drawer.js.map

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

@@ -0,0 +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,iCAAiC,CAAC;AACjE,OAAO,EAAC,MAAM,EAAC,MAAM,wCAAwC,CAAC;AAC9D,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,6BAA6B,CAAC;AAQnE;;;GAGG;AAEI,WAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,gBAAgB;;AAC7B,yBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,AAAzB,CAA0B;AAD9C,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAE9B","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.js';\nimport {styles as sharedStyles} from './internal/shared-styles.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

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

package/labs/navigationtab/harness.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../../testing/harness.js';
+import { NavigationTab } from './internal/navigation-tab.js';
+/**
+ * Test harness for navigation tab elements.
+ */
+export declare class NavigationTabHarness extends Harness<NavigationTab> {
+    getInteractiveElement(): Promise<HTMLElement>;
+}

package/labs/navigationtab/harness.js

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../../testing/harness.js';
+/**
+ * Test harness for navigation tab elements.
+ */
+export class NavigationTabHarness extends Harness {
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        return this.element.renderRoot.querySelector('.md3-navigation-tab');
+    }
+}
+//# sourceMappingURL=harness.js.map

package/labs/navigationtab/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;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,CAC1C,qBAAqB,CACP,CAAC;IACnB,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(\n      '.md3-navigation-tab',\n    ) as HTMLElement;\n  }\n}\n"]}

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

@@ -0,0 +1,264 @@
+//
+// 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 '../../../ripple/ripple';
+@use '../../../tokens';
+@use '../../badge/badge';
+// go/keep-sorted end
+
+$animation-duration: 100ms;
+
+@mixin theme($tokens) {
+  // $supported-tokens: tokens.$md-comp-navigation-bar-supported-tokens;
+
+  @each $token, $value in $tokens {
+    // @if list.index($supported-tokens, $token) == null {
+    //   @error 'Token `#{$token}` is not a supported token.';
+    // }
+
+    @if $value {
+      --md-navigation-bar-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-navigation-bar-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-navigation-bar-#{$token}, #{$value});
+    }
+
+    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-family: var(--_label-text-font);
+    font-size: var(--_label-text-size);
+    line-height: var(--_label-text-line-height);
+    font-weight: var(--_label-text-weight);
+    // Override the user-agent text-transform: none of <button>
+    text-transform: inherit;
+
+    // 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

@@ -0,0 +1 @@
+:host{--_active-indicator-color: var(--md-navigation-bar-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, var(--md-navigation-bar-active-indicator-height, 32px));--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, var(--md-navigation-bar-active-indicator-shape, var(--md-sys-shape-corner-full, 9999px)));--_active-indicator-width: var(--md-navigation-bar-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-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-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-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-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-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-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-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-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, var(--md-navigation-bar-active-label-text-weight, var(--md-sys-typescale-label-medium-weight-prominent, var(--md-ref-typeface-weight-bold, 700))));--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-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-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-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_container-color: var(--md-navigation-bar-container-color, var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7)));--_container-elevation: var(--md-navigation-bar-container-elevation, var(--md-navigation-bar-container-elevation, 2));--_container-height: var(--md-navigation-bar-container-height, var(--md-navigation-bar-container-height, 80px));--_container-shape: var(--md-navigation-bar-container-shape, var(--md-navigation-bar-container-shape, var(--md-sys-shape-corner-none, 0px)));--_focus-state-layer-opacity: var(--md-navigation-bar-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, var(--md-navigation-bar-hover-state-layer-opacity, 0.08));--_icon-size: var(--md-navigation-bar-icon-size, var(--md-navigation-bar-icon-size, 24px));--_inactive-focus-icon-color: var(--md-navigation-bar-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-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-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-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-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-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-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-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-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-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-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-navigation-bar-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto))));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, var(--md-navigation-bar-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem)));--_label-text-size: var(--md-navigation-bar-label-text-size, var(--md-navigation-bar-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem)));--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, var(--md-navigation-bar-label-text-tracking, ));--_label-text-type: var(--md-navigation-bar-label-text-type, var(--md-navigation-bar-label-text-type, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-medium-size, 0.75rem) / var(--md-sys-typescale-label-medium-line-height, 1rem) var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto))));--_label-text-weight: var(--md-navigation-bar-label-text-weight, var(--md-navigation-bar-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500))));--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, var(--md-navigation-bar-pressed-state-layer-opacity, 0.12));display:flex;flex-grow:1}md-focus-ring{--md-focus-ring-shape: var(--md-sys-shape-corner-small, 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-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);text-transform:inherit}.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 */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["_navigation-tab.scss","../../../focus/internal/_focus-ring.scss","../../../ripple/internal/_ripple.scss"],"names":[],"mappings":"AAsCE,MAEI,g+NAGF,aACA,YAGF,cCxBI,iGDiCJ,oBACE,mBACA,gBACA,gBACA,YACA,sBACA,eACA,aACA,sBACA,YACA,uBACA,gBACA,eACA,aACA,qBACA,kBACA,kBACA,WACA,oCACA,kCACA,2CACA,sCAEA,uBAGA,sCACE,SACA,UAIJ,kCACE,mBACA,sBACA,aACA,uBACA,kBACA,UAGF,gCACE,YACA,eACA,UACA,gGAEA,UAEA,0GAEE,SACA,UAIJ,sCACE,aACA,uBACA,UACA,kBACA,+FAEA,WACA,gDACA,6CAEA,kEACE,UAKJ,wEAEE,uCAIF,oGAEE,qCAGF,0BACE,kBACA,kBACA,qBACA,kBACA,wBACA,yBACA,4BAEA,2DACE,aAGF,sDACE,aAEA,uFACE,qBAKN,4BACE,UAGF,4BEjJI,kQFkJF,sDACE,gCAGF,4DACE,sCAIA,4DACE,sCAGF,kEACE,4CAKF,4DACE,sCAGF,kEACE,4CAKF,6DACE,wCAGF,mEACE,8CAcN,qDElMI,sQFmMF,+EACE,kCAGF,qFACE,wCAIA,qFACE,wCAGF,2FACE,8CAKF,qFACE,wCAGF,2FACE,8CAKF,sFACE,0CAGF,4FACE","file":"navigation-tab-styles.css"}

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

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

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

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/navigationtab/internal/navigation-tab-styles.css.
+import { css } from 'lit';
+export const styles = css `:host{--_active-indicator-color: var(--md-navigation-bar-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, var(--md-navigation-bar-active-indicator-height, 32px));--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, var(--md-navigation-bar-active-indicator-shape, var(--md-sys-shape-corner-full, 9999px)));--_active-indicator-width: var(--md-navigation-bar-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-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-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-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-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-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-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-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-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, var(--md-navigation-bar-active-label-text-weight, var(--md-sys-typescale-label-medium-weight-prominent, var(--md-ref-typeface-weight-bold, 700))));--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-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-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-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_container-color: var(--md-navigation-bar-container-color, var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7)));--_container-elevation: var(--md-navigation-bar-container-elevation, var(--md-navigation-bar-container-elevation, 2));--_container-height: var(--md-navigation-bar-container-height, var(--md-navigation-bar-container-height, 80px));--_container-shape: var(--md-navigation-bar-container-shape, var(--md-navigation-bar-container-shape, var(--md-sys-shape-corner-none, 0px)));--_focus-state-layer-opacity: var(--md-navigation-bar-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, var(--md-navigation-bar-hover-state-layer-opacity, 0.08));--_icon-size: var(--md-navigation-bar-icon-size, var(--md-navigation-bar-icon-size, 24px));--_inactive-focus-icon-color: var(--md-navigation-bar-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-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-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-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-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-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-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-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-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-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-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-navigation-bar-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto))));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, var(--md-navigation-bar-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem)));--_label-text-size: var(--md-navigation-bar-label-text-size, var(--md-navigation-bar-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem)));--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, var(--md-navigation-bar-label-text-tracking, ));--_label-text-type: var(--md-navigation-bar-label-text-type, var(--md-navigation-bar-label-text-type, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-medium-size, 0.75rem) / var(--md-sys-typescale-label-medium-line-height, 1rem) var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto))));--_label-text-weight: var(--md-navigation-bar-label-text-weight, var(--md-navigation-bar-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500))));--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, var(--md-navigation-bar-pressed-state-layer-opacity, 0.12));display:flex;flex-grow:1}md-focus-ring{--md-focus-ring-shape: var(--md-sys-shape-corner-small, 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-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);text-transform:inherit}.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.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-tab-styles.js","sourceRoot":"","sources":["navigation-tab-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,oFAAoF;AACpF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/navigationtab/internal/navigation-tab-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{--_active-indicator-color: var(--md-navigation-bar-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, var(--md-navigation-bar-active-indicator-height, 32px));--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, var(--md-navigation-bar-active-indicator-shape, var(--md-sys-shape-corner-full, 9999px)));--_active-indicator-width: var(--md-navigation-bar-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-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-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-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-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-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-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-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-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, var(--md-navigation-bar-active-label-text-weight, var(--md-sys-typescale-label-medium-weight-prominent, var(--md-ref-typeface-weight-bold, 700))));--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-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-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-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_container-color: var(--md-navigation-bar-container-color, var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7)));--_container-elevation: var(--md-navigation-bar-container-elevation, var(--md-navigation-bar-container-elevation, 2));--_container-height: var(--md-navigation-bar-container-height, var(--md-navigation-bar-container-height, 80px));--_container-shape: var(--md-navigation-bar-container-shape, var(--md-navigation-bar-container-shape, var(--md-sys-shape-corner-none, 0px)));--_focus-state-layer-opacity: var(--md-navigation-bar-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, var(--md-navigation-bar-hover-state-layer-opacity, 0.08));--_icon-size: var(--md-navigation-bar-icon-size, var(--md-navigation-bar-icon-size, 24px));--_inactive-focus-icon-color: var(--md-navigation-bar-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-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-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-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-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-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-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-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-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-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-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-navigation-bar-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto))));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, var(--md-navigation-bar-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem)));--_label-text-size: var(--md-navigation-bar-label-text-size, var(--md-navigation-bar-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem)));--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, var(--md-navigation-bar-label-text-tracking, ));--_label-text-type: var(--md-navigation-bar-label-text-type, var(--md-navigation-bar-label-text-type, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-medium-size, 0.75rem) / var(--md-sys-typescale-label-medium-line-height, 1rem) var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto))));--_label-text-weight: var(--md-navigation-bar-label-text-weight, var(--md-navigation-bar-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500))));--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, var(--md-navigation-bar-pressed-state-layer-opacity, 0.12));display:flex;flex-grow:1}md-focus-ring{--md-focus-ring-shape: var(--md-sys-shape-corner-small, 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-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);text-transform:inherit}.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)}\n`;\n"]}

package/labs/navigationtab/internal/navigation-tab-styles.scss

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

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

@@ -0,0 +1,38 @@
+/**
+ * @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';
+declare const navigationTabBaseClass: import("../../behaviors/mixin.js").MixinReturn<typeof LitElement>;
+/**
+ * b/265346501 - add docs
+ *
+ * @fires navigation-tab-rendered {Event} Dispatched when the navigation tab's
+ * DOM has rendered and custom element definition has loaded. --bubbles
+ * --composed
+ * @fires navigation-tab-interaction {CustomEvent<{state: MdNavigationTab}>}
+ * Dispatched when the navigation tab has been clicked. --bubbles --composed
+ */
+export declare class NavigationTab extends navigationTabBaseClass 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;
+}
+export {};