@material/web 0.1.0-alpha.0 → 0.1.0-alpha.2

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

@@ -3,18 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use './navigation-bar';
-@use './navigation-bar-theme';
-
-@include navigation-bar.static-styles();
-
-:host {
-  width: 100%;
-}
 
-.md3-navigation-bar {
-  @include navigation-bar-theme.theme-styles(navigation-bar-theme.$light-theme);
-}
+@include navigation-bar.styles;

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

@@ -3,9 +3,9 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { AnyDuringAriaMigration } from '@material/web/compat/base/aria-property.js';
-import { NavigationTab } from '@material/web/navigationtab/lib/navigation-tab.js';
+import '../../elevation/elevation.js';
 import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { NavigationTab } from '../../navigationtab/lib/navigation-tab.js';
 import { NavigationBarState } from './state.js';
 /** @soyCompatible */
 export declare class NavigationBar extends LitElement implements NavigationBarState {
@@ -13,9 +13,10 @@ export declare class NavigationBar extends LitElement implements NavigationBarSt
     hideInactiveLabels: boolean;
     tabs: NavigationTab[];
     protected tabsElement: NavigationTab[];
-    /** @soyPrefixAttribute */ ariaLabel: string | AnyDuringAriaMigration;
+    ariaLabel: string;
     /** @soyTemplate */
     render(): TemplateResult;
+    protected updated(changedProperties: PropertyValues<NavigationBar>): void;
     firstUpdated(changedProperties: PropertyValues): void;
     layout(): void;
     private handleNavigationTabConnected;

package/navigationbar/lib/navigation-bar.js

@@ -4,34 +4,49 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate, __metadata } from "tslib";
-import { KEY, normalizeKey } from '@material/web/compat/dom/keyboard.js';
-import { ariaProperty } from '@material/web/compat/base/aria-property.js';
-import { observer } from '@material/web/compat/base/observer.js';
-import { deepActiveElementPath } from '@material/web/compat/base/utils.js';
+import '../../elevation/elevation.js';
 import { html, LitElement } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { isRtl } from '../../controller/is-rtl.js';
+import { ariaProperty } from '../../decorators/aria-property.js';
 /** @soyCompatible */
 export class NavigationBar extends LitElement {
     constructor() {
         super(...arguments);
         this.activeIndex = 0;
         this.hideInactiveLabels = false;
-        // tslint:disable-next-line:no-new-decorators
         this.tabs = [];
     }
     /** @soyTemplate */
     render() {
         return html `<div class="md3-navigation-bar"
             role="tablist"
-            aria-label="${ifDefined(this.ariaLabel)}"
+            aria-label="${ifDefined(this.ariaLabel || undefined)}"
             @keydown="${this.handleKeydown}"
             @navigation-tab-interaction="${this.handleNavigationTabInteraction}"
             @navigation-tab-rendered=${this.handleNavigationTabConnected}
-          ><div class="md3-elevation-overlay"
-        ></div><div class="md3-navigation-bar__tabs-slot-container"
+          ><md-elevation shadow surface
+          ></md-elevation><div class="md3-navigation-bar__tabs-slot-container"
         ><slot></slot></div></div>`;
     }
+    updated(changedProperties) {
+        if (changedProperties.has('activeIndex')) {
+            this.onActiveIndexChange(this.activeIndex);
+            this.dispatchEvent(new CustomEvent('navigation-bar-activated', {
+                detail: { tab: this.tabs[this.activeIndex], activeIndex: this.activeIndex },
+                bubbles: true,
+                composed: true
+            }));
+        }
+        if (changedProperties.has('hideInactiveLabels')) {
+            this.onHideInactiveLabelsChange(this.hideInactiveLabels);
+        }
+        if (changedProperties.has('tabs')) {
+            this.onHideInactiveLabelsChange(this.hideInactiveLabels);
+            this.onActiveIndexChange(this.activeIndex);
+        }
+    }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         this.layout();
@@ -55,28 +70,25 @@ export class NavigationBar extends LitElement {
         this.activeIndex = this.tabs.indexOf(event.detail.state);
     }
     handleKeydown(event) {
-        const key = normalizeKey(event);
-        const activeElementPath = deepActiveElementPath();
+        const key = event.key;
         const focusedTabIndex = this.tabs.findIndex((tab) => {
-            return tab.buttonElement ===
-                activeElementPath[activeElementPath.length - 1];
+            return tab.matches(':focus-within');
         });
-        const isRTL = getComputedStyle(this).getPropertyValue('direction') === 'rtl';
+        const isRTL = isRtl(this);
         const maxIndex = this.tabs.length - 1;
-        if (key === KEY.ENTER || key === KEY.SPACEBAR) {
+        if (key === 'Enter' || key === ' ') {
             this.activeIndex = focusedTabIndex;
             return;
         }
-        if (key === KEY.HOME) {
+        if (key === 'Home') {
             this.tabs[0].focus();
             return;
         }
-        if (key === KEY.END) {
+        if (key === 'End') {
             this.tabs[maxIndex].focus();
             return;
         }
-        const toNextTab = (key === KEY.ARROW_RIGHT && !isRTL) ||
-            (key === KEY.ARROW_LEFT && isRTL);
+        const toNextTab = (key === 'ArrowRight' && !isRTL) || (key === 'ArrowLeft' && isRTL);
         if (toNextTab && focusedTabIndex === maxIndex) {
             this.tabs[0].focus();
             return;
@@ -85,8 +97,7 @@ export class NavigationBar extends LitElement {
             this.tabs[focusedTabIndex + 1].focus();
             return;
         }
-        const toPreviousTab = (key === KEY.ARROW_LEFT && !isRTL) ||
-            (key === KEY.ARROW_RIGHT && isRTL);
+        const toPreviousTab = (key === 'ArrowLeft' && !isRTL) || (key === 'ArrowRight' && isRTL);
         if (toPreviousTab && focusedTabIndex === 0) {
             this.tabs[maxIndex].focus();
             return;
@@ -111,40 +122,20 @@ export class NavigationBar extends LitElement {
     }
 }
 __decorate([
-    property({ type: Number }) // tslint:disable-next-line:no-new-decorators
-    ,
-    observer(function (value) {
-        this.onActiveIndexChange(this.activeIndex);
-        this.dispatchEvent(new CustomEvent('navigation-bar-activated', {
-            detail: { tab: this.tabs[value], activeIndex: this.activeIndex },
-            bubbles: true,
-            composed: true
-        }));
-    }),
+    property({ type: Number }),
     __metadata("design:type", Object)
 ], NavigationBar.prototype, "activeIndex", void 0);
 __decorate([
-    property({ type: Boolean }) // tslint:disable-next-line:no-new-decorators
-    ,
-    observer(function (value) {
-        this.onHideInactiveLabelsChange(this.hideInactiveLabels);
-    }),
+    property({ type: Boolean }),
     __metadata("design:type", Object)
 ], NavigationBar.prototype, "hideInactiveLabels", void 0);
-__decorate([
-    observer(function () {
-        this.onHideInactiveLabelsChange(this.hideInactiveLabels);
-        this.onActiveIndexChange(this.activeIndex);
-    }),
-    __metadata("design:type", Array)
-], NavigationBar.prototype, "tabs", void 0);
 __decorate([
     queryAssignedElements({ flatten: true }),
     __metadata("design:type", Array)
 ], NavigationBar.prototype, "tabsElement", void 0);
 __decorate([
     ariaProperty,
-    property({ attribute: 'aria-label' }),
-    __metadata("design:type", Object)
+    property({ attribute: 'data-aria-label', noAccessor: true }),
+    __metadata("design:type", String)
 ], NavigationBar.prototype, "ariaLabel", void 0);
 //# sourceMappingURL=navigation-bar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-bar.js","sourceRoot":"","sources":["navigation-bar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {KEY, normalizeKey} from '@material/web/compat/dom/keyboard.js';\nimport {AnyDuringAriaMigration, ariaProperty} from '@material/web/compat/base/aria-property.js';\nimport {observer} from '@material/web/compat/base/observer.js';\nimport {deepActiveElementPath} from '@material/web/compat/base/utils.js';\nimport {NavigationTab} from '@material/web/navigationtab/lib/navigation-tab.js';\nimport {html, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {NavigationTabInteractionEvent} from './constants.js';\nimport {NavigationBarState} from './state.js';\n\n/** @soyCompatible */\nexport class NavigationBar extends LitElement implements NavigationBarState {\n  @property({type: Number})  // tslint:disable-next-line:no-new-decorators\n  @observer(function(this: NavigationBar, value: number) {\n    this.onActiveIndexChange(this.activeIndex);\n    this.dispatchEvent(new CustomEvent('navigation-bar-activated', {\n      detail: {tab: this.tabs[value], activeIndex: this.activeIndex},\n      bubbles: true,\n      composed: true\n    }));\n  })\n  activeIndex = 0;\n\n  @property({type: Boolean})  // tslint:disable-next-line:no-new-decorators\n  @observer(function(this: NavigationBar, value: boolean) {\n    this.onHideInactiveLabelsChange(this.hideInactiveLabels);\n  })\n  hideInactiveLabels = false;\n\n  // tslint:disable-next-line:no-new-decorators\n  @observer(function(this: NavigationBar) {\n    this.onHideInactiveLabelsChange(this.hideInactiveLabels);\n    this.onActiveIndexChange(this.activeIndex);\n  })\n  tabs: NavigationTab[] = [];\n\n  @queryAssignedElements({flatten: true})\n  protected tabsElement!: NavigationTab[];\n\n  /** @soyPrefixAttribute */  // tslint:disable-next-line:no-new-decorators\n  @ariaProperty\n  @property({attribute: 'aria-label'})\n  override ariaLabel: string|AnyDuringAriaMigration;\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`<div class=\"md3-navigation-bar\"\n            role=\"tablist\"\n            aria-label=\"${ifDefined(this.ariaLabel)}\"\n            @keydown=\"${this.handleKeydown}\"\n            @navigation-tab-interaction=\"${this.handleNavigationTabInteraction}\"\n            @navigation-tab-rendered=${this.handleNavigationTabConnected}\n          ><div class=\"md3-elevation-overlay\"\n        ></div><div class=\"md3-navigation-bar__tabs-slot-container\"\n        ><slot></slot></div></div>`;\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    this.layout();\n  }\n\n  layout() {\n    if (!this.tabsElement) return;\n    const navTabs: NavigationTab[] = [];\n    for (const node of this.tabsElement) {\n      navTabs.push(node);\n    }\n    this.tabs = navTabs;\n  }\n\n  private handleNavigationTabConnected(event: CustomEvent) {\n    const target = event.target as NavigationTab;\n    if (this.tabs.indexOf(target) === -1) {\n      this.layout();\n    }\n  }\n\n  private handleNavigationTabInteraction(event: NavigationTabInteractionEvent) {\n    this.activeIndex = this.tabs.indexOf(event.detail.state as NavigationTab);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const key = normalizeKey(event);\n    const activeElementPath = deepActiveElementPath();\n    const focusedTabIndex = this.tabs.findIndex((tab) => {\n      return tab.buttonElement ===\n          activeElementPath[activeElementPath.length - 1];\n    });\n    const isRTL =\n        getComputedStyle(this).getPropertyValue('direction') === 'rtl';\n    const maxIndex = this.tabs.length - 1;\n\n    if (key === KEY.ENTER || key === KEY.SPACEBAR) {\n      this.activeIndex = focusedTabIndex;\n      return;\n    }\n\n    if (key === KEY.HOME) {\n      this.tabs[0].focus();\n      return;\n    }\n\n    if (key === KEY.END) {\n      this.tabs[maxIndex].focus();\n      return;\n    }\n\n    const toNextTab = (key === KEY.ARROW_RIGHT && !isRTL) ||\n        (key === KEY.ARROW_LEFT && isRTL);\n    if (toNextTab && focusedTabIndex === maxIndex) {\n      this.tabs[0].focus();\n      return;\n    }\n    if (toNextTab) {\n      this.tabs[focusedTabIndex + 1].focus();\n      return;\n    }\n\n    const toPreviousTab = (key === KEY.ARROW_LEFT && !isRTL) ||\n        (key === KEY.ARROW_RIGHT && isRTL);\n    if (toPreviousTab && focusedTabIndex === 0) {\n      this.tabs[maxIndex].focus();\n      return;\n    }\n    if (toPreviousTab) {\n      this.tabs[focusedTabIndex - 1].focus();\n      return;\n    }\n  }\n\n  private onActiveIndexChange(value: number) {\n    if (!this.tabs[value]) {\n      throw new Error('NavigationBar: activeIndex is out of bounds.');\n    }\n    for (let i = 0; i < this.tabs.length; i++) {\n      this.tabs[i].active = i === value;\n    }\n  }\n\n  private onHideInactiveLabelsChange(value: boolean) {\n    for (const tab of this.tabs) {\n      tab.hideInactiveLabel = value;\n    }\n  }\n}\n"]}
+{"version":3,"file":"navigation-bar.js","sourceRoot":"","sources":["navigation-bar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {isRtl} from '../../controller/is-rtl.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {NavigationTab} from '../../navigationtab/lib/navigation-tab.js';\n\nimport {NavigationTabInteractionEvent} from './constants.js';\nimport {NavigationBarState} from './state.js';\n\n/** @soyCompatible */\nexport class NavigationBar extends LitElement implements NavigationBarState {\n  @property({type: Number}) activeIndex = 0;\n\n  @property({type: Boolean}) hideInactiveLabels = false;\n\n  tabs: NavigationTab[] = [];\n\n  @queryAssignedElements({flatten: true})\n  protected tabsElement!: NavigationTab[];\n\n  // tslint:disable-next-line:no-new-decorators\n  @ariaProperty\n  @property({attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel!: string;\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`<div class=\"md3-navigation-bar\"\n            role=\"tablist\"\n            aria-label=\"${ifDefined(this.ariaLabel || undefined)}\"\n            @keydown=\"${this.handleKeydown}\"\n            @navigation-tab-interaction=\"${this.handleNavigationTabInteraction}\"\n            @navigation-tab-rendered=${this.handleNavigationTabConnected}\n          ><md-elevation shadow surface\n          ></md-elevation><div class=\"md3-navigation-bar__tabs-slot-container\"\n        ><slot></slot></div></div>`;\n  }\n\n  protected override updated(changedProperties: PropertyValues<NavigationBar>) {\n    if (changedProperties.has('activeIndex')) {\n      this.onActiveIndexChange(this.activeIndex);\n      this.dispatchEvent(new CustomEvent('navigation-bar-activated', {\n        detail:\n            {tab: this.tabs[this.activeIndex], activeIndex: this.activeIndex},\n        bubbles: true,\n        composed: true\n      }));\n    }\n\n    if (changedProperties.has('hideInactiveLabels')) {\n      this.onHideInactiveLabelsChange(this.hideInactiveLabels);\n    }\n\n    if (changedProperties.has('tabs')) {\n      this.onHideInactiveLabelsChange(this.hideInactiveLabels);\n      this.onActiveIndexChange(this.activeIndex);\n    }\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    this.layout();\n  }\n\n  layout() {\n    if (!this.tabsElement) return;\n    const navTabs: NavigationTab[] = [];\n    for (const node of this.tabsElement) {\n      navTabs.push(node);\n    }\n    this.tabs = navTabs;\n  }\n\n  private handleNavigationTabConnected(event: CustomEvent) {\n    const target = event.target as NavigationTab;\n    if (this.tabs.indexOf(target) === -1) {\n      this.layout();\n    }\n  }\n\n  private handleNavigationTabInteraction(event: NavigationTabInteractionEvent) {\n    this.activeIndex = this.tabs.indexOf(event.detail.state as NavigationTab);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const key = event.key;\n    const focusedTabIndex = this.tabs.findIndex((tab) => {\n      return tab.matches(':focus-within');\n    });\n    const isRTL = isRtl(this);\n    const maxIndex = this.tabs.length - 1;\n\n    if (key === 'Enter' || key === ' ') {\n      this.activeIndex = focusedTabIndex;\n      return;\n    }\n\n    if (key === 'Home') {\n      this.tabs[0].focus();\n      return;\n    }\n\n    if (key === 'End') {\n      this.tabs[maxIndex].focus();\n      return;\n    }\n\n    const toNextTab =\n        (key === 'ArrowRight' && !isRTL) || (key === 'ArrowLeft' && isRTL);\n    if (toNextTab && focusedTabIndex === maxIndex) {\n      this.tabs[0].focus();\n      return;\n    }\n    if (toNextTab) {\n      this.tabs[focusedTabIndex + 1].focus();\n      return;\n    }\n\n    const toPreviousTab =\n        (key === 'ArrowLeft' && !isRTL) || (key === 'ArrowRight' && isRTL);\n    if (toPreviousTab && focusedTabIndex === 0) {\n      this.tabs[maxIndex].focus();\n      return;\n    }\n    if (toPreviousTab) {\n      this.tabs[focusedTabIndex - 1].focus();\n      return;\n    }\n  }\n\n  private onActiveIndexChange(value: number) {\n    if (!this.tabs[value]) {\n      throw new Error('NavigationBar: activeIndex is out of bounds.');\n    }\n    for (let i = 0; i < this.tabs.length; i++) {\n      this.tabs[i].active = i === value;\n    }\n  }\n\n  private onHideInactiveLabelsChange(value: boolean) {\n    for (const tab of this.tabs) {\n      tab.hideInactiveLabel = value;\n    }\n  }\n}\n"]}

package/navigationbar/lib/state.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { NavigationTabState } from '@material/web/navigationtab/lib/state.js';
+import { NavigationTabState } from '../../navigationtab/lib/state.js';
 /**
  * The state of a navigation Bar.
  */

package/navigationbar/lib/state.js.map

@@ -1 +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 '@material/web/navigationtab/lib/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"]}
+{"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/lib/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/navigationdrawer/_navigation-drawer-modal.scss

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

package/navigationdrawer/_navigation-drawer.scss

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

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

@@ -6,21 +6,52 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@use '@material/web/motion/animation';
-@use '@material/web/elevation/lib/elevation-overlay';
+@use 'sass:map';
+@use '../../motion/animation';
+@use '../../elevationold/lib/elevation-overlay';
+@use '../../elevationold/lib/elevation-theme';
+@use '../../sass/theme';
+@use './shared';
 
 $_curve: animation.$standard-easing;
 $_delay: 0s;
 $_transition-duration: 0.25s;
 
-@mixin static-styles() {
-  @include elevation-overlay.static-styles();
-  @include _base();
-  @include _slot-content();
-  @include _scrim();
+$_reference: (
+  container-color: #fff,
+  container-height: 100%,
+  container-shape: 0 16px 16px 0,
+  container-surface-tint-layer-color: null,
+  container-width: 360px,
+  // TODO(b/216384393): Temporary existing token to use for shadow color
+  divider-color: #000,
+  modal-container-elevation: 1,
+  scrim-color: null,
+  scrim-opacity: 0.04,
+  standard-container-elevation: 0,
+);
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme($_reference, $tokens);
+  $tokens: shared.resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, 'navigation-drawer-modal');
+
+  @include theme.emit-theme-vars($tokens);
 }
 
-@mixin _base() {
+@mixin styles() {
+  $tokens: $_reference;
+  $tokens: shared.resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, 'navigation-drawer-modal');
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
+  @include elevation-overlay.static-styles();
+
   .md3-navigation-drawer-modal {
     bottom: 0;
     box-sizing: border-box;
@@ -34,6 +65,13 @@ $_transition-duration: 0.25s;
     transition: inline-size $_transition-duration $_curve $_delay,
       visibility $_delay $_curve $_transition-duration;
 
+    @include elevation-theme.theme-styles(
+      (
+        overlay-opacity: var(--_modal-container-elevation-overlay-opacity),
+        surface-tint-layer-color: var(--_container-surface-tint-layer-color),
+      )
+    );
+
     .md3-elevation-overlay {
       width: inherit;
       z-index: 0;
@@ -43,27 +81,30 @@ $_transition-duration: 0.25s;
   .md3-navigation-drawer-modal--opened {
     transition: inline-size $_transition-duration $_curve $_delay,
       visibility $_delay $_curve $_delay;
+
+    @include elevation-theme.theme-styles(
+      (
+        shadow: var(--_modal-container-elevation-shadow),
+      )
+    );
   }
 
   .md3-navigation-drawer-modal--pivot-at-start {
     justify-content: flex-start;
   }
-}
 
-@mixin _slot-content() {
   .md3-navigation-drawer-modal__slot-content {
     display: flex;
     flex-direction: column;
     position: relative;
   }
-}
 
-@mixin _scrim() {
   .md3-navigation-drawer-modal__scrim {
     inset: 0;
     opacity: 0;
     position: absolute;
     visibility: hidden;
+    background-color: var(--_scrim-color);
 
     transition: opacity $_transition-duration $_curve $_delay,
       visibility $_delay $_curve $_transition-duration;
@@ -71,6 +112,7 @@ $_transition-duration: 0.25s;
 
   .md3-navigation-drawer-modal--scrim-visible {
     visibility: visible;
+    opacity: var(--_scrim-opacity);
 
     transition: opacity $_transition-duration $_curve $_delay,
       visibility $_delay $_curve $_delay;

package/navigationdrawer/lib/_navigation-drawer.scss

@@ -6,21 +6,54 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@use '@material/web/motion/animation';
-@use '@material/web/elevation/lib/elevation-overlay';
+@use 'sass:map';
+
+@use '../../motion/animation';
+@use '../../elevationold/lib/elevation-overlay';
+@use '../../elevationold/lib/elevation-theme';
+@use '../../sass/theme';
+@use './shared';
 
 $curve: animation.$standard-easing;
 $default: 0s;
 $delay: 0s;
 $transition-duration: 0.25s;
 
-@mixin static-styles() {
-  @include elevation-overlay.static-styles();
-  @include _base();
-  @include _slot-content();
+$_reference: (
+  container-color: #fff,
+  container-height: 100%,
+  container-shape: 0 16px 16px 0,
+  container-surface-tint-layer-color: null,
+  container-width: 360px,
+  // TODO(b/216384393): Temporary existing token to use for shadow color
+  divider-color: #000,
+  modal-container-elevation: 1,
+  standard-container-elevation: 0,
+);
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme($_reference, $tokens);
+  $tokens: shared.resolve-tokens($tokens);
+
+  $tokens: theme.create-theme-vars($tokens, 'navigation-drawer');
+
+  @include theme.emit-theme-vars($tokens);
 }
 
-@mixin _base() {
+@mixin styles() {
+  $tokens: $_reference;
+  $tokens: shared.resolve-tokens($tokens);
+
+  $tokens: theme.create-theme-vars($tokens, 'navigation-drawer');
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
+  @include elevation-overlay.static-styles();
+
   :host {
     display: flex;
   }
@@ -37,6 +70,14 @@ $transition-duration: 0.25s;
     transition: inline-size $transition-duration $curve $delay,
       visibility $default $curve $transition-duration;
 
+    @include elevation-theme.theme-styles(
+      (
+        shadow: var(--_standard-container-elevation-shadow),
+        overlay-opacity: var(--_standard-container-elevation-overlay-opacity),
+        surface-tint-layer-color: var(--_container-surface-tint-layer-color),
+      )
+    );
+
     .md3-elevation-overlay {
       width: inherit;
       z-index: 0;
@@ -53,9 +94,7 @@ $transition-duration: 0.25s;
   .md3-navigation-drawer--pivot-at-start {
     justify-content: flex-start;
   }
-}
 
-@mixin _slot-content() {
   .md3-navigation-drawer__slot-content {
     display: flex;
     flex-direction: column;

package/navigationdrawer/lib/_shared.scss

@@ -0,0 +1,49 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use 'sass:map';
+
+@use '../../elevationold/lib/elevation-theme';
+@use '../../sass/resolvers';
+@use '../../sass/shape';
+
+@mixin styles() {
+  .md3-navigation-drawer-modal {
+    background-color: var(--_container-color);
+    border-start-start-radius: var(--_container-shape-start-start);
+    border-start-end-radius: var(--_container-shape-start-end);
+    border-end-end-radius: var(--_container-shape-end-end);
+    border-end-start-radius: var(--_container-shape-end-start);
+    height: var(--_container-height);
+
+    &.md3-navigation-drawer-modal--opened {
+      inline-size: var(--_container-width);
+    }
+
+    .md3-navigation-drawer-modal__slot-content {
+      min-inline-size: var(--_container-width);
+      max-inline-size: var(--_container-width);
+    }
+  }
+}
+
+@function resolve-tokens($tokens) {
+  $tokens: elevation-theme.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, elevation),
+    $shadow-color-token: divider-color,
+    $elevation-tokens: (modal-container-elevation)
+  );
+  $tokens: shape.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, shape),
+    container-shape
+  );
+
+  @return $tokens;
+}

package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `.md3-elevation-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);z-index:-2}.md3-navigation-drawer-modal{bottom:0;box-sizing:border-box;display:flex;justify-content:flex-end;overflow:hidden;position:absolute;top:0;inline-size:0;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}.md3-navigation-drawer-modal .md3-elevation-overlay{width:inherit;z-index:0}.md3-navigation-drawer-modal--opened{transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s}.md3-navigation-drawer-modal--pivot-at-start{justify-content:flex-start}.md3-navigation-drawer-modal__slot-content{display:flex;flex-direction:column;position:relative}.md3-navigation-drawer-modal__scrim{inset:0;opacity:0;position:absolute;visibility:hidden;transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}.md3-navigation-drawer-modal--scrim-visible{visibility:visible;transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s}.md3-navigation-drawer-modal{background-color:var(--md-navigation-drawer-modal-container-color, #fff);border-start-start-radius:var(--md-navigation-drawer-modal-container-shape-start-start, 0);border-start-end-radius:var(--md-navigation-drawer-modal-container-shape-start-end, 16px);border-end-end-radius:var(--md-navigation-drawer-modal-container-shape-end-end, 16px);border-end-start-radius:var(--md-navigation-drawer-modal-container-shape-end-start, 0);height:var(--md-navigation-drawer-modal-container-height, 100%)}.md3-navigation-drawer-modal.md3-navigation-drawer-modal--opened{inline-size:var(--md-navigation-drawer-modal-container-width, 360px)}.md3-navigation-drawer-modal .md3-navigation-drawer-modal__slot-content{min-inline-size:var(--md-navigation-drawer-modal-container-width, 360px);max-inline-size:var(--md-navigation-drawer-modal-container-width, 360px)}.md3-navigation-drawer-modal .md3-elevation-overlay{opacity:var(--md-navigation-drawer-modal-modal-container-elevation-overlay-opacity, 0.05)}.md3-navigation-drawer-modal.md3-navigation-drawer-modal--opened{--md-elevation-box-shadow-for-gss:0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);box-shadow:var(--md-navigation-drawer-modal-modal-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-navigation-drawer-modal--scrim-visible{opacity:var(--md-navigation-drawer-modal-scrim-opacity, 0.04)}/*# sourceMappingURL=navigation-drawer-modal-styles.css.map */
+export const styles = css `:host{--_container-shape-start-start: var(--md-navigation-drawer-modal-container-shape-start-start, 0);--_container-shape-start-end: var(--md-navigation-drawer-modal-container-shape-start-end, 16px);--_container-shape-end-end: var(--md-navigation-drawer-modal-container-shape-end-end, 16px);--_container-shape-end-start: var(--md-navigation-drawer-modal-container-shape-end-start, 0);--_container-color: var(--md-navigation-drawer-modal-container-color, #fff);--_container-height: var(--md-navigation-drawer-modal-container-height, 100%);--_container-surface-tint-layer-color: ;--_container-width: var(--md-navigation-drawer-modal-container-width, 360px);--_scrim-color: ;--_scrim-opacity: var(--md-navigation-drawer-modal-scrim-opacity, 0.04);--_standard-container-elevation: var(--md-navigation-drawer-modal-standard-container-elevation, 0);--_modal-container-elevation-shadow: var(--md-navigation-drawer-modal-modal-container-elevation-shadow, 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15));--_modal-container-elevation-overlay-opacity: var(--md-navigation-drawer-modal-modal-container-elevation-overlay-opacity, 0.05)}.md3-elevation-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);z-index:-2}.md3-navigation-drawer-modal{bottom:0;box-sizing:border-box;display:flex;justify-content:flex-end;overflow:hidden;position:absolute;top:0;inline-size:0;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}.md3-navigation-drawer-modal .md3-elevation-overlay{background-color:var(--_container-surface-tint-layer-color)}.md3-navigation-drawer-modal .md3-elevation-overlay{opacity:var(--_modal-container-elevation-overlay-opacity)}.md3-navigation-drawer-modal .md3-elevation-overlay{width:inherit;z-index:0}.md3-navigation-drawer-modal--opened{transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s;box-shadow:var(--_modal-container-elevation-shadow)}.md3-navigation-drawer-modal--pivot-at-start{justify-content:flex-start}.md3-navigation-drawer-modal__slot-content{display:flex;flex-direction:column;position:relative}.md3-navigation-drawer-modal__scrim{inset:0;opacity:0;position:absolute;visibility:hidden;background-color:var(--_scrim-color);transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}.md3-navigation-drawer-modal--scrim-visible{visibility:visible;opacity:var(--_scrim-opacity);transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s}/*# sourceMappingURL=navigation-drawer-modal-styles.css.map */
 `;
 //# sourceMappingURL=navigation-drawer-modal-styles.css.js.map

package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-drawer-modal-styles.css.js","sourceRoot":"","sources":["navigation-drawer-modal-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`.md3-elevation-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);z-index:-2}.md3-navigation-drawer-modal{bottom:0;box-sizing:border-box;display:flex;justify-content:flex-end;overflow:hidden;position:absolute;top:0;inline-size:0;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}.md3-navigation-drawer-modal .md3-elevation-overlay{width:inherit;z-index:0}.md3-navigation-drawer-modal--opened{transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s}.md3-navigation-drawer-modal--pivot-at-start{justify-content:flex-start}.md3-navigation-drawer-modal__slot-content{display:flex;flex-direction:column;position:relative}.md3-navigation-drawer-modal__scrim{inset:0;opacity:0;position:absolute;visibility:hidden;transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}.md3-navigation-drawer-modal--scrim-visible{visibility:visible;transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s}.md3-navigation-drawer-modal{background-color:var(--md-navigation-drawer-modal-container-color, #fff);border-start-start-radius:var(--md-navigation-drawer-modal-container-shape-start-start, 0);border-start-end-radius:var(--md-navigation-drawer-modal-container-shape-start-end, 16px);border-end-end-radius:var(--md-navigation-drawer-modal-container-shape-end-end, 16px);border-end-start-radius:var(--md-navigation-drawer-modal-container-shape-end-start, 0);height:var(--md-navigation-drawer-modal-container-height, 100%)}.md3-navigation-drawer-modal.md3-navigation-drawer-modal--opened{inline-size:var(--md-navigation-drawer-modal-container-width, 360px)}.md3-navigation-drawer-modal .md3-navigation-drawer-modal__slot-content{min-inline-size:var(--md-navigation-drawer-modal-container-width, 360px);max-inline-size:var(--md-navigation-drawer-modal-container-width, 360px)}.md3-navigation-drawer-modal .md3-elevation-overlay{opacity:var(--md-navigation-drawer-modal-modal-container-elevation-overlay-opacity, 0.05)}.md3-navigation-drawer-modal.md3-navigation-drawer-modal--opened{--md-elevation-box-shadow-for-gss:0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);box-shadow:var(--md-navigation-drawer-modal-modal-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-navigation-drawer-modal--scrim-visible{opacity:var(--md-navigation-drawer-modal-scrim-opacity, 0.04)}/*# sourceMappingURL=navigation-drawer-modal-styles.css.map */\n`;\n "]}
+{"version":3,"file":"navigation-drawer-modal-styles.css.js","sourceRoot":"","sources":["navigation-drawer-modal-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{--_container-shape-start-start: var(--md-navigation-drawer-modal-container-shape-start-start, 0);--_container-shape-start-end: var(--md-navigation-drawer-modal-container-shape-start-end, 16px);--_container-shape-end-end: var(--md-navigation-drawer-modal-container-shape-end-end, 16px);--_container-shape-end-start: var(--md-navigation-drawer-modal-container-shape-end-start, 0);--_container-color: var(--md-navigation-drawer-modal-container-color, #fff);--_container-height: var(--md-navigation-drawer-modal-container-height, 100%);--_container-surface-tint-layer-color: ;--_container-width: var(--md-navigation-drawer-modal-container-width, 360px);--_scrim-color: ;--_scrim-opacity: var(--md-navigation-drawer-modal-scrim-opacity, 0.04);--_standard-container-elevation: var(--md-navigation-drawer-modal-standard-container-elevation, 0);--_modal-container-elevation-shadow: var(--md-navigation-drawer-modal-modal-container-elevation-shadow, 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15));--_modal-container-elevation-overlay-opacity: var(--md-navigation-drawer-modal-modal-container-elevation-overlay-opacity, 0.05)}.md3-elevation-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);z-index:-2}.md3-navigation-drawer-modal{bottom:0;box-sizing:border-box;display:flex;justify-content:flex-end;overflow:hidden;position:absolute;top:0;inline-size:0;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}.md3-navigation-drawer-modal .md3-elevation-overlay{background-color:var(--_container-surface-tint-layer-color)}.md3-navigation-drawer-modal .md3-elevation-overlay{opacity:var(--_modal-container-elevation-overlay-opacity)}.md3-navigation-drawer-modal .md3-elevation-overlay{width:inherit;z-index:0}.md3-navigation-drawer-modal--opened{transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s;box-shadow:var(--_modal-container-elevation-shadow)}.md3-navigation-drawer-modal--pivot-at-start{justify-content:flex-start}.md3-navigation-drawer-modal__slot-content{display:flex;flex-direction:column;position:relative}.md3-navigation-drawer-modal__scrim{inset:0;opacity:0;position:absolute;visibility:hidden;background-color:var(--_scrim-color);transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}.md3-navigation-drawer-modal--scrim-visible{visibility:visible;opacity:var(--_scrim-opacity);transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s}/*# sourceMappingURL=navigation-drawer-modal-styles.css.map */\n`;\n "]}

package/navigationdrawer/lib/navigation-drawer-modal-styles.scss

@@ -3,10 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@use './navigation-drawer-modal-theme';
 @use './navigation-drawer-modal';
 
-@include navigation-drawer-modal.static-styles();
-@include navigation-drawer-modal-theme.theme-styles(
-  navigation-drawer-modal-theme.$light-theme
-);
+@include navigation-drawer-modal.styles;

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

@@ -3,22 +3,22 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { AnyDuringAriaMigration } from '@material/web/compat/base/aria-property.js';
-import { LitElement, TemplateResult } from 'lit';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
 /** @soyCompatible */
 export declare class NavigationDrawerModal extends LitElement {
-    /** @soyPrefixAttribute */ ariaDescribedBy: string | undefined;
-    ariaLabel: string | AnyDuringAriaMigration;
+    ariaDescribedBy: string | undefined;
+    ariaLabel: string;
     ariaModal: 'true' | 'false';
-    /** @soyPrefixAttribute */ ariaLabelledBy: string | undefined;
+    ariaLabelledBy: string | undefined;
     opened: boolean;
     pivot: 'start' | 'end';
     /** @soyTemplate */
     render(): TemplateResult;
     /** @soyTemplate classMap */
-    protected getScrimClasses(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/class-map").ClassMapDirective>;
+    protected getScrimClasses(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/class-map.js").ClassMapDirective>;
     /** @soyTemplate classMap */
-    protected getRenderClasses(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/class-map").ClassMapDirective>;
+    protected getRenderClasses(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/class-map.js").ClassMapDirective>;
+    protected updated(changedProperties: PropertyValues<NavigationDrawerModal>): void;
     private handleKeyDown;
     private handleScrimClick;
 }