@material/web 0.1.0-alpha.0

package/navigationdrawer/lib/navigation-drawer.js

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+// TODO(b/231221156): remove compat dependencies
+import { ariaProperty as legacyAriaProperty } from '@material/web/compat/base/aria-property.js';
+import { observer } from '@material/web/compat/base/observer.js';
+import { ariaProperty } from '@material/web/decorators/aria-property.js';
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+/** @soyCompatible */
+export class NavigationDrawer extends LitElement {
+    constructor() {
+        super(...arguments);
+        // tslint:disable-next-line:no-new-decorators
+        this.ariaModal = 'false';
+        this.opened = false;
+        this.pivot = 'end';
+    }
+    /** @soyTemplate */
+    render() {
+        const ariaExpanded = this.opened ? 'true' : 'false';
+        const ariaHidden = !this.opened ? 'true' : 'false';
+        return html `
+      <div
+        aria-describedby="${ifDefined(this.ariaDescribedBy)}"
+        aria-expanded="${ariaExpanded}"
+        aria-hidden="${ariaHidden}"
+        aria-label="${ifDefined(this.ariaLabel)}"
+        aria-labelledby="${ifDefined(this.ariaLabelledBy)}"
+        aria-modal="${this.ariaModal}"
+        class="md3-navigation-drawer ${this.getRenderClasses()}"
+        role="dialog"><div class="md3-elevation-overlay"
+        ></div>
+        <div class="md3-navigation-drawer__slot-content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+    /** @soyTemplate classMap */
+    getRenderClasses() {
+        return classMap({
+            'md3-navigation-drawer--opened': this.opened,
+            'md3-navigation-drawer--pivot-at-start': this.pivot === 'start',
+        });
+    }
+}
+__decorate([
+    legacyAriaProperty,
+    property({ type: String, attribute: 'aria-describedby' }),
+    __metadata("design:type", String)
+], NavigationDrawer.prototype, "ariaDescribedBy", void 0);
+__decorate([
+    ariaProperty,
+    property({ type: String, attribute: 'data-aria-label', noAccessor: true }),
+    __metadata("design:type", Object)
+], NavigationDrawer.prototype, "ariaLabel", void 0);
+__decorate([
+    ariaProperty,
+    property({ attribute: 'data-aria-modal', type: String, noAccessor: true }),
+    __metadata("design:type", String)
+], NavigationDrawer.prototype, "ariaModal", void 0);
+__decorate([
+    legacyAriaProperty,
+    property({ type: String, attribute: 'aria-labelledby' }),
+    __metadata("design:type", String)
+], NavigationDrawer.prototype, "ariaLabelledBy", void 0);
+__decorate([
+    property({ type: Boolean }) // tslint:disable-next-line:no-new-decorators
+    ,
+    observer(function (value) {
+        setTimeout(() => {
+            this.dispatchEvent(new CustomEvent('navigation-drawer-changed', { detail: { opened: value }, bubbles: true, composed: true }));
+        }, 250);
+    }),
+    __metadata("design:type", Object)
+], NavigationDrawer.prototype, "opened", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], NavigationDrawer.prototype, "pivot", void 0);
+//# sourceMappingURL=navigation-drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-drawer.js","sourceRoot":"","sources":["navigation-drawer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,gDAAgD;AAChD,OAAO,EAAyB,YAAY,IAAI,kBAAkB,EAAC,MAAM,4CAA4C,CAAC;AACtH,OAAO,EAAC,QAAQ,EAAC,MAAM,uCAAuC,CAAC;AAC/D,OAAO,EAAC,YAAY,EAAC,MAAM,2CAA2C,CAAC;AACvE,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAEvD,qBAAqB;AACrB,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAAhD;;QAYE,6CAA6C;QAGpC,cAAS,GAAmB,OAAO,CAAC;QAe7C,WAAM,GAAG,KAAK,CAAC;QACW,UAAK,GAAkB,KAAK,CAAC;IAgCzD,CAAC;IA9BC,mBAAmB;IACV,MAAM;QACb,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;QAEnD,OAAO,IAAI,CAAA;;4BAEa,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;yBAClC,YAAY;uBACd,UAAU;sBACX,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;2BACpB,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC;sBACnC,IAAI,CAAC,SAAS;uCACG,IAAI,CAAC,gBAAgB,EAAE;;;;;;;KAOzD,CAAC;IACJ,CAAC;IAED,4BAA4B;IAClB,gBAAgB;QACxB,OAAO,QAAQ,CAAC;YACd,+BAA+B,EAAE,IAAI,CAAC,MAAM;YAC5C,uCAAuC,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;SAChE,CAAC,CAAC;IACL,CAAC;CACF;AA1DC;IAFC,kBAAkB;IAClB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAC,CAAC;;yDACtB;AAKlC;IAFC,YAAY;IACZ,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;mDACvB;AAKlD;IAFC,YAAY;IACZ,QAAQ,CAAC,EAAC,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;mDAC5B;AAK7C;IAFC,kBAAkB;IAClB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAC,CAAC;;wDACtB;AAUjC;IARC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC,CAAE,6CAA6C;;IACxE,QAAQ,CAAC,UAAiC,KAAc;QACvD,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAC9B,2BAA2B,EAC3B,EAAC,MAAM,EAAE,EAAC,MAAM,EAAE,KAAK,EAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;QACjE,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC,CAAC;;gDACa;AACW;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;+CAA8B","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// TODO(b/231221156): remove compat dependencies\nimport {AnyDuringAriaMigration, ariaProperty as legacyAriaProperty} from '@material/web/compat/base/aria-property.js';\nimport {observer} from '@material/web/compat/base/observer.js';\nimport {ariaProperty} from '@material/web/decorators/aria-property.js';\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\n/** @soyCompatible */\nexport class NavigationDrawer extends LitElement {\n  /* aria properties */\n  /** @soyPrefixAttribute */  // tslint:disable-next-line:no-new-decorators\n  @legacyAriaProperty\n  @property({type: String, attribute: 'aria-describedby'})\n  ariaDescribedBy: string|undefined;\n\n  // tslint:disable-next-line:no-new-decorators\n  @ariaProperty\n  @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel: string|AnyDuringAriaMigration;\n\n  // tslint:disable-next-line:no-new-decorators\n  @ariaProperty\n  @property({attribute: 'data-aria-modal', type: String, noAccessor: true})\n  override ariaModal: 'true'|'false' = 'false';\n\n  /** @soyPrefixAttribute */  // tslint:disable-next-line:no-new-decorators\n  @legacyAriaProperty\n  @property({type: String, attribute: 'aria-labelledby'})\n  ariaLabelledBy: string|undefined;\n\n  @property({type: Boolean})  // tslint:disable-next-line:no-new-decorators\n  @observer(function(this: NavigationDrawer, value: boolean) {\n    setTimeout(() => {\n      this.dispatchEvent(new CustomEvent(\n          'navigation-drawer-changed',\n          {detail: {opened: value}, bubbles: true, composed: true}));\n    }, 250);\n  })\n  opened = false;\n  @property({type: String}) pivot: 'start'|'end' = 'end';\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    const ariaExpanded = this.opened ? 'true' : 'false';\n    const ariaHidden = !this.opened ? 'true' : 'false';\n\n    return html`\n      <div\n        aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\"\n        aria-expanded=\"${ariaExpanded}\"\n        aria-hidden=\"${ariaHidden}\"\n        aria-label=\"${ifDefined(this.ariaLabel)}\"\n        aria-labelledby=\"${ifDefined(this.ariaLabelledBy)}\"\n        aria-modal=\"${this.ariaModal}\"\n        class=\"md3-navigation-drawer ${this.getRenderClasses()}\"\n        role=\"dialog\"><div class=\"md3-elevation-overlay\"\n        ></div>\n        <div class=\"md3-navigation-drawer__slot-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /** @soyTemplate classMap */\n  protected getRenderClasses() {\n    return classMap({\n      'md3-navigation-drawer--opened': this.opened,\n      'md3-navigation-drawer--pivot-at-start': this.pivot === 'start',\n    });\n  }\n}\n"]}

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

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

package/navigationdrawer/navigation-drawer-modal.js

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

package/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,kCAAkC,CAAC;AACvE,OAAO,EAAC,MAAM,EAAC,MAAM,6CAA6C,CAAC;AAQnE;;;;GAIG;AAEH,IAAa,uBAAuB,GAApC,MAAa,uBAAwB,SAAQ,qBAAqB;CAEjE,CAAA;AAD0B,8BAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AADhC,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';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-drawer-modal': MdNavigationDrawerModal;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-navigation-drawer-modal')\nexport class MdNavigationDrawerModal extends NavigationDrawerModal {\n  static override readonly styles = [styles];\n}\n"]}

package/navigationdrawer/navigation-drawer.d.ts

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

package/navigationdrawer/navigation-drawer.js

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

package/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,4BAA4B,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,uCAAuC,CAAC;AAQ7D;;;;GAIG;AAEH,IAAa,kBAAkB,GAA/B,MAAa,kBAAmB,SAAQ,gBAAgB;CAEvD,CAAA;AAD0B,yBAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AADhC,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';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-drawer': MdNavigationDrawer;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-navigation-drawer')\nexport class MdNavigationDrawer extends NavigationDrawer {\n  static override readonly styles = [styles];\n}\n"]}

package/navigationtab/_navigation-tab.scss

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

package/navigationtab/harness.d.ts

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

package/navigationtab/harness.js

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '@material/web/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/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,kCAAkC,CAAC;AAIzD;;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 '@material/web/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"]}

package/navigationtab/lib/_navigation-tab-theme.scss

@@ -0,0 +1,343 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use 'sass:map';
+
+// TODO(b/228217731): Remove compat dependencies
+@use '@material/web/badge/lib/badge-theme';
+@use '@material/web/ripple/ripple-theme';
+@use '@material/web/compat/theme/keys';
+@use '@material/web/compat/theme/shadow-dom';
+@use '@material/web/compat/theme/state';
+@use '@material/web/compat/theme/theme-color';
+@use '@material/web/focus/lib/focus-ring-theme';
+@use '@material/web/sass/theme';
+@use '@material/web/tokens/latest' as tokens;
+
+$_custom-property-prefix: 'navigation-bar';
+
+$light-theme: tokens.md-comp-navigation-bar-values();
+$dark-theme: tokens.md-comp-navigation-bar-values(
+  (
+    md-sys-color: tokens.md-sys-color-values-dark-non-dynamic(),
+  ),
+  $exclude-hardcoded-values: true
+);
+
+@mixin theme($theme) {
+  $theme: theme.validate-theme($light-theme, $theme);
+
+  @if shadow-dom.$css-selector-fallback-declarations {
+    @include theme-styles($theme);
+  }
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($theme);
+}
+
+@mixin theme-styles($theme) {
+  $theme: theme.validate-theme-styles(
+    $light-theme,
+    $theme,
+    $require-all: false
+  );
+
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  @include _icon-size(map.get($theme, icon-size));
+  @include _active-icon-color(
+    (
+      default: map.get($theme, active-icon-color),
+      hover: map.get($theme, active-hover-icon-color),
+      focus: map.get($theme, active-focus-icon-color),
+      pressed: map.get($theme, active-pressed-icon-color),
+    )
+  );
+  @include _inactive-icon-color(
+    (
+      default: map.get($theme, inactive-icon-color),
+      hover: map.get($theme, inactive-hover-icon-color),
+      focus: map.get($theme, inactive-focus-icon-color),
+      pressed: map.get($theme, inactive-pressed-icon-color),
+    )
+  );
+
+  @include _set-label-text-typography(
+    (
+      family: map.get($theme, label-text-font),
+      size: map.get($theme, label-text-size),
+      tracking: map.get($theme, label-text-tracking),
+      weight: map.get($theme, label-text-weight),
+    )
+  );
+
+  @include _active-label-text-color(
+    (
+      default: map.get($theme, active-label-text-color),
+      hover: map.get($theme, active-hover-label-text-color),
+      focus: map.get($theme, active-focus-label-text-color),
+      pressed: map.get($theme, active-pressed-label-text-color),
+    )
+  );
+  @include _inactive-label-text-color(
+    (
+      default: map.get($theme, inactive-label-text-color),
+      hover: map.get($theme, inactive-hover-label-text-color),
+      focus: map.get($theme, inactive-focus-label-text-color),
+      pressed: map.get($theme, inactive-pressed-label-text-color),
+    )
+  );
+
+  @include _active-indicator-color(map.get($theme, active-indicator-color));
+  @include _active-indicator-height(map.get($theme, active-indicator-height));
+  @include _active-indicator-width(map.get($theme, active-indicator-width));
+  @include _active-indicator-shape(map.get($theme, active-indicator-shape));
+
+  @include ripple-theme.theme(
+    (
+      hover-state-layer-color: map.get($theme, inactive-hover-state-layer-color),
+      focus-state-layer-color: map.get($theme, inactive-focus-state-layer-color),
+      pressed-state-layer-color:
+        map.get($theme, inactive-pressed-state-layer-color),
+      hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity),
+      focus-state-layer-opacity: map.get($theme, focus-state-layer-opacity),
+      pressed-state-layer-opacity: map.get($theme, pressed-state-layer-opacity),
+    )
+  );
+
+  @include _is-active() {
+    @include ripple-theme.theme(
+      (
+        hover-state-layer-color: map.get($theme, active-hover-state-layer-color),
+        focus-state-layer-color: map.get($theme, active-focus-state-layer-color),
+        pressed-state-layer-color:
+          map.get($theme, active-pressed-state-layer-color),
+        hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity),
+        focus-state-layer-opacity: map.get($theme, focus-state-layer-opacity),
+        pressed-state-layer-opacity:
+          map.get($theme, pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  @include focus-ring-theme.theme(
+    (
+      container-outer-padding-vertical: -4px,
+      container-outer-padding-horizontal: -4px,
+    )
+  );
+
+  @include badge-theme.theme(
+    (
+      color: map.get($theme, badge-color),
+      size: map.get($theme, badge-size),
+      shape: map.get($theme, badge-shape),
+      large-color: map.get($theme, large-badge-color),
+      large-size: map.get($theme, large-badge-size),
+      large-shape: map.get($theme, large-badge-shape),
+    )
+  );
+}
+
+@mixin _icon-size($size) {
+  .md3-navigation-tab__icon {
+    width: $size;
+    height: $size;
+    font-size: $size;
+  }
+}
+
+@mixin _icon-color($color) {
+  .md3-navigation-tab__icon {
+    color: $color;
+
+    fill: currentColor;
+  }
+}
+
+@mixin _active-icon-color($color-or-map) {
+  &:not(:disabled) {
+    @include _set-active-icon-color(state.get-default-state($color-or-map));
+
+    &:hover {
+      @include _set-active-icon-color(state.get-hover-state($color-or-map));
+    }
+    &:focus {
+      @include _set-active-icon-color(state.get-focus-state($color-or-map));
+    }
+    &:active {
+      @include _set-active-icon-color(state.get-pressed-state($color-or-map));
+    }
+  }
+
+  &:disabled {
+    @include _set-active-icon-color(state.get-disabled-state($color-or-map));
+  }
+}
+
+@mixin _set-active-icon-color($color) {
+  @include _is-active() {
+    @include _icon-color($color);
+  }
+}
+
+@mixin _inactive-icon-color($color-or-map) {
+  &:not(:disabled) {
+    @include _set-inactive-icon-color(state.get-default-state($color-or-map));
+
+    &:hover {
+      @include _set-inactive-icon-color(state.get-hover-state($color-or-map));
+    }
+    &:focus {
+      @include _set-inactive-icon-color(state.get-focus-state($color-or-map));
+    }
+    &:active {
+      @include _set-inactive-icon-color(state.get-pressed-state($color-or-map));
+    }
+  }
+
+  &:disabled {
+    @include _set-inactive-icon-color(state.get-disabled-state($color-or-map));
+  }
+}
+
+@mixin _set-inactive-icon-color($color) {
+  @include _is-inactive() {
+    @include _icon-color($color);
+  }
+}
+
+@mixin _label-text-color($color) {
+  .md3-navigation-tab__label-text {
+    color: $color;
+  }
+}
+
+@mixin _active-label-text-color($color-or-map) {
+  &:not(:disabled) {
+    @include _set-active-label-text-color(
+      state.get-default-state($color-or-map)
+    );
+
+    &:hover {
+      @include _set-active-label-text-color(
+        state.get-hover-state($color-or-map)
+      );
+    }
+    &:focus {
+      @include _set-active-label-text-color(
+        state.get-focus-state($color-or-map)
+      );
+    }
+    &:active {
+      @include _set-active-label-text-color(
+        state.get-pressed-state($color-or-map)
+      );
+    }
+  }
+
+  &:disabled {
+    @include _set-active-label-text-color(
+      state.get-disabled-state($color-or-map)
+    );
+  }
+}
+
+@mixin _set-active-label-text-color($color) {
+  @include _is-active() {
+    @include _label-text-color($color);
+  }
+}
+
+@mixin _inactive-label-text-color($color-or-map) {
+  &:not(:disabled) {
+    @include _set-inactive-label-text-color(
+      state.get-default-state($color-or-map)
+    );
+
+    &:hover {
+      @include _set-inactive-label-text-color(
+        state.get-hover-state($color-or-map)
+      );
+    }
+    &:focus {
+      @include _set-inactive-label-text-color(
+        state.get-focus-state($color-or-map)
+      );
+    }
+    &:active {
+      @include _set-inactive-label-text-color(
+        state.get-pressed-state($color-or-map)
+      );
+    }
+  }
+
+  &:disabled {
+    @include _set-inactive-label-text-color(
+      state.get-disabled-state($color-or-map)
+    );
+  }
+}
+
+@mixin _set-inactive-label-text-color($color) {
+  @include _is-inactive() {
+    @include _label-text-color($color);
+  }
+}
+
+@mixin _set-label-text-typography($typography-map) {
+  $family: map.get($typography-map, family);
+  $size: map.get($typography-map, size);
+  $tracking: map.get($typography-map, tracking);
+  $weight: map.get($typography-map, weight);
+
+  font-family: $family;
+  font-size: $size;
+  letter-spacing: $tracking;
+  font-weight: $weight;
+}
+
+@mixin _active-indicator-color($color) {
+  .md3-navigation-tab__active-indicator {
+    background-color: $color;
+  }
+}
+
+@mixin _active-indicator-height($height) {
+  // Keep icon-content in sync with active-indicator size.
+  .md3-navigation-tab__active-indicator,
+  .md3-navigation-tab__icon-content {
+    height: $height;
+  }
+}
+
+@mixin _active-indicator-width($width) {
+  // Keep icon-content in sync with active-indicator size.
+  &.md3-navigation-tab--active .md3-navigation-tab__active-indicator,
+  .md3-navigation-tab__icon-content {
+    width: $width;
+  }
+}
+
+@mixin _active-indicator-shape($shape-radius) {
+  .md3-navigation-tab__active-indicator {
+    border-radius: $shape-radius;
+  }
+}
+
+@mixin _is-active() {
+  &.md3-navigation-tab--active {
+    @content;
+  }
+}
+
+@mixin _is-inactive() {
+  &:not(.md3-navigation-tab--active) {
+    @content;
+  }
+}