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

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

@@ -4,14 +4,11 @@
  * 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';
+import { ariaProperty } from '../../decorators/aria-property.js';
 /** @soyCompatible */
 export class NavigationDrawerModal extends LitElement {
     constructor() {
@@ -60,6 +57,13 @@ export class NavigationDrawerModal extends LitElement {
             'md3-navigation-drawer-modal--pivot-at-start': this.pivot === 'start',
         });
     }
+    updated(changedProperties) {
+        if (changedProperties.has('opened')) {
+            setTimeout(() => {
+                this.dispatchEvent(new CustomEvent('navigation-drawer-changed', { detail: { opened: this.opened }, bubbles: true, composed: true }));
+            }, 250);
+        }
+    }
     handleKeyDown(e) {
         if (e.code === 'Escape') {
             this.opened = false;
@@ -70,14 +74,14 @@ export class NavigationDrawerModal extends LitElement {
     }
 }
 __decorate([
-    legacyAriaProperty,
-    property({ type: String, attribute: 'aria-describedby' }),
+    ariaProperty,
+    property({ type: String, attribute: 'data-aria-describedby', noAccessor: true }),
     __metadata("design:type", String)
 ], NavigationDrawerModal.prototype, "ariaDescribedBy", void 0);
 __decorate([
     ariaProperty,
     property({ type: String, attribute: 'data-aria-label', noAccessor: true }),
-    __metadata("design:type", Object)
+    __metadata("design:type", String)
 ], NavigationDrawerModal.prototype, "ariaLabel", void 0);
 __decorate([
     ariaProperty,
@@ -85,18 +89,13 @@ __decorate([
     __metadata("design:type", String)
 ], NavigationDrawerModal.prototype, "ariaModal", void 0);
 __decorate([
-    legacyAriaProperty,
-    property({ type: String, attribute: 'aria-labelledby' }),
+    ariaProperty,
+    property({ type: String, attribute: 'data-aria-labelledby', noAccessor: true }),
     __metadata("design:type", String)
 ], NavigationDrawerModal.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)
 ], NavigationDrawerModal.prototype, "opened", void 0);
 __decorate([

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-drawer-modal.js","sourceRoot":"","sources":["navigation-drawer-modal.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,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,qBAAsB,SAAQ,UAAU;IAArD;;QAYE,6CAA6C;QAGpC,cAAS,GAAmB,OAAO,CAAC;QAe7C,WAAM,GAAG,KAAK,CAAC;QACW,UAAK,GAAkB,KAAK,CAAC;IAsDzD,CAAC;IApDC,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;;oDAEqC,IAAI,CAAC,eAAe,EAAE;kBACxD,IAAI,CAAC,gBAAgB;;;4BAGX,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;6CACS,IAAI,CAAC,gBAAgB,EAAE;oBAChD,IAAI,CAAC,aAAa;;;;;;;KAOjC,CAAC;IACJ,CAAC;IAED,4BAA4B;IAClB,eAAe;QACvB,OAAO,QAAQ,CAAC;YACd,4CAA4C,EAAE,IAAI,CAAC,MAAM;SAC1D,CAAC,CAAC;IACL,CAAC;IAED,4BAA4B;IAClB,gBAAgB;QACxB,OAAO,QAAQ,CAAC;YACd,qCAAqC,EAAE,IAAI,CAAC,MAAM;YAClD,6CAA6C,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;SACtE,CAAC,CAAC;IACL,CAAC;IAEO,aAAa,CAAC,CAAgB;QACpC,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,EAAE;YACvB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SACrB;IACH,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC;CACF;AAhFC;IAFC,kBAAkB;IAClB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAC,CAAC;;8DACtB;AAKlC;IAFC,YAAY;IACZ,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;wDACvB;AAKlD;IAFC,YAAY;IACZ,QAAQ,CAAC,EAAC,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;wDAC5B;AAK7C;IAFC,kBAAkB;IAClB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAC,CAAC;;6DACtB;AAUjC;IARC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC,CAAE,6CAA6C;;IACxE,QAAQ,CAAC,UAAsC,KAAc;QAC5D,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;;qDACa;AACW;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;oDAA8B","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 NavigationDrawerModal 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: NavigationDrawerModal, 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        class=\"md3-navigation-drawer-modal__scrim ${this.getScrimClasses()}\"\n        @click=\"${this.handleScrimClick}\">\n      </div>\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-modal ${this.getRenderClasses()}\"\n        @keydown=\"${this.handleKeyDown}\"\n        role=\"dialog\"><div class=\"md3-elevation-overlay\"\n        ></div>\n        <div class=\"md3-navigation-drawer-modal__slot-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /** @soyTemplate classMap */\n  protected getScrimClasses() {\n    return classMap({\n      'md3-navigation-drawer-modal--scrim-visible': this.opened,\n    });\n  }\n\n  /** @soyTemplate classMap */\n  protected getRenderClasses() {\n    return classMap({\n      'md3-navigation-drawer-modal--opened': this.opened,\n      'md3-navigation-drawer-modal--pivot-at-start': this.pivot === 'start',\n    });\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (e.code === 'Escape') {\n      this.opened = false;\n    }\n  }\n\n  private handleScrimClick() {\n    this.opened = !this.opened;\n  }\n}\n"]}
+{"version":3,"file":"navigation-drawer-modal.js","sourceRoot":"","sources":["navigation-drawer-modal.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, PropertyValues, 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\nimport {ariaProperty} from '../../decorators/aria-property.js';\n\n/** @soyCompatible */\nexport class NavigationDrawerModal extends LitElement {\n  /* aria properties */\n  // tslint:disable-next-line:no-new-decorators\n  @ariaProperty\n  @property(\n      {type: String, attribute: 'data-aria-describedby', noAccessor: true})\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;\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  // tslint:disable-next-line:no-new-decorators\n  @ariaProperty\n  @property({type: String, attribute: 'data-aria-labelledby', noAccessor: true})\n  ariaLabelledBy: string|undefined;\n\n  @property({type: Boolean})  // tslint:disable-next-line:no-new-decorators\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        class=\"md3-navigation-drawer-modal__scrim ${this.getScrimClasses()}\"\n        @click=\"${this.handleScrimClick}\">\n      </div>\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-modal ${this.getRenderClasses()}\"\n        @keydown=\"${this.handleKeyDown}\"\n        role=\"dialog\"><div class=\"md3-elevation-overlay\"\n        ></div>\n        <div class=\"md3-navigation-drawer-modal__slot-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /** @soyTemplate classMap */\n  protected getScrimClasses() {\n    return classMap({\n      'md3-navigation-drawer-modal--scrim-visible': this.opened,\n    });\n  }\n\n  /** @soyTemplate classMap */\n  protected getRenderClasses() {\n    return classMap({\n      'md3-navigation-drawer-modal--opened': this.opened,\n      'md3-navigation-drawer-modal--pivot-at-start': this.pivot === 'start',\n    });\n  }\n\n  protected override updated(changedProperties:\n                                 PropertyValues<NavigationDrawerModal>) {\n    if (changedProperties.has('opened')) {\n      setTimeout(() => {\n        this.dispatchEvent(new CustomEvent(\n            'navigation-drawer-changed',\n            {detail: {opened: this.opened}, bubbles: true, composed: true}));\n      }, 250);\n    }\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (e.code === 'Escape') {\n      this.opened = false;\n    }\n  }\n\n  private handleScrimClick() {\n    this.opened = !this.opened;\n  }\n}\n"]}

package/navigationdrawer/lib/navigation-drawer-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}:host{display:flex}.md3-navigation-drawer{inline-size:0;box-sizing:border-box;display:flex;justify-content:flex-end;overflow:hidden;overflow-y:auto;visibility:hidden;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}.md3-navigation-drawer .md3-elevation-overlay{width:inherit;z-index:0}.md3-navigation-drawer--opened{visibility:visible;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--pivot-at-start{justify-content:flex-start}.md3-navigation-drawer__slot-content{display:flex;flex-direction:column;position:relative}.md3-navigation-drawer{background-color:var(--md-navigation-drawer-container-color, #fff);border-start-start-radius:var(--md-navigation-drawer-container-shape-start-start, 0);border-start-end-radius:var(--md-navigation-drawer-container-shape-start-end, 16px);border-end-end-radius:var(--md-navigation-drawer-container-shape-end-end, 16px);border-end-start-radius:var(--md-navigation-drawer-container-shape-end-start, 0);height:var(--md-navigation-drawer-container-height, 100%);--md-elevation-box-shadow-for-gss:none;box-shadow:var(--md-navigation-drawer-standard-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-navigation-drawer.md3-navigation-drawer--opened{inline-size:var(--md-navigation-drawer-container-width, 360px)}.md3-navigation-drawer .md3-navigation-drawer__slot-content{min-inline-size:var(--md-navigation-drawer-container-width, 360px);max-inline-size:var(--md-navigation-drawer-container-width, 360px)}.md3-navigation-drawer .md3-elevation-overlay{opacity:var(--md-navigation-drawer-standard-container-elevation-overlay-opacity, 0)}/*# sourceMappingURL=navigation-drawer-styles.css.map */
+export const styles = css `:host{--_container-shape-start-start: var(--md-navigation-drawer-container-shape-start-start, 0);--_container-shape-start-end: var(--md-navigation-drawer-container-shape-start-end, 16px);--_container-shape-end-end: var(--md-navigation-drawer-container-shape-end-end, 16px);--_container-shape-end-start: var(--md-navigation-drawer-container-shape-end-start, 0);--_container-color: var(--md-navigation-drawer-container-color, #fff);--_container-height: var(--md-navigation-drawer-container-height, 100%);--_container-surface-tint-layer-color: ;--_container-width: var(--md-navigation-drawer-container-width, 360px);--_standard-container-elevation: var(--md-navigation-drawer-standard-container-elevation, 0);--_modal-container-elevation-shadow: var(--md-navigation-drawer-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-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}:host{display:flex}.md3-navigation-drawer{inline-size:0;box-sizing:border-box;display:flex;justify-content:flex-end;overflow:hidden;overflow-y:auto;visibility:hidden;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s;box-shadow:var(--_standard-container-elevation-shadow)}.md3-navigation-drawer .md3-elevation-overlay{background-color:var(--_container-surface-tint-layer-color)}.md3-navigation-drawer .md3-elevation-overlay{opacity:var(--_standard-container-elevation-overlay-opacity)}.md3-navigation-drawer .md3-elevation-overlay{width:inherit;z-index:0}.md3-navigation-drawer--opened{visibility:visible;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--pivot-at-start{justify-content:flex-start}.md3-navigation-drawer__slot-content{display:flex;flex-direction:column;position:relative}/*# sourceMappingURL=navigation-drawer-styles.css.map */
 `;
 //# sourceMappingURL=navigation-drawer-styles.css.js.map

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

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

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

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

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

@@ -3,18 +3,18 @@
  * 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 NavigationDrawer 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 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<NavigationDrawer>): void;
 }

package/navigationdrawer/lib/navigation-drawer.js

@@ -4,14 +4,11 @@
  * 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';
+import { ariaProperty } from '../../decorators/aria-property.js';
 /** @soyCompatible */
 export class NavigationDrawer extends LitElement {
     constructor() {
@@ -49,16 +46,23 @@ export class NavigationDrawer extends LitElement {
             'md3-navigation-drawer--pivot-at-start': this.pivot === 'start',
         });
     }
+    updated(changedProperties) {
+        if (changedProperties.has('opened')) {
+            setTimeout(() => {
+                this.dispatchEvent(new CustomEvent('navigation-drawer-changed', { detail: { opened: this.opened }, bubbles: true, composed: true }));
+            }, 250);
+        }
+    }
 }
 __decorate([
-    legacyAriaProperty,
-    property({ type: String, attribute: 'aria-describedby' }),
+    ariaProperty,
+    property({ type: String, attribute: 'data-aria-describedby', noAccessor: true }),
     __metadata("design:type", String)
 ], NavigationDrawer.prototype, "ariaDescribedBy", void 0);
 __decorate([
     ariaProperty,
     property({ type: String, attribute: 'data-aria-label', noAccessor: true }),
-    __metadata("design:type", Object)
+    __metadata("design:type", String)
 ], NavigationDrawer.prototype, "ariaLabel", void 0);
 __decorate([
     ariaProperty,
@@ -66,18 +70,13 @@ __decorate([
     __metadata("design:type", String)
 ], NavigationDrawer.prototype, "ariaModal", void 0);
 __decorate([
-    legacyAriaProperty,
-    property({ type: String, attribute: 'aria-labelledby' }),
+    ariaProperty,
+    property({ type: String, attribute: 'data-aria-labelledby', noAccessor: true }),
     __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([

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

@@ -1 +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"]}
+{"version":3,"file":"navigation-drawer.js","sourceRoot":"","sources":["navigation-drawer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAEvD,OAAO,EAAC,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAE/D,qBAAqB;AACrB,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAAhD;;QAaE,6CAA6C;QAGpC,cAAS,GAAmB,OAAO,CAAC;QAQ7C,WAAM,GAAG,KAAK,CAAC;QACW,UAAK,GAAkB,KAAK,CAAC;IA2CzD,CAAC;IAzCC,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;IAEkB,OAAO,CAAC,iBACoC;QAC7D,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACnC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAC9B,2BAA2B,EAC3B,EAAC,MAAM,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;YACvE,CAAC,EAAE,GAAG,CAAC,CAAC;SACT;IACH,CAAC;CACF;AA9DC;IAHC,YAAY;IACZ,QAAQ,CACL,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,uBAAuB,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;yDACvC;AAKlC;IAFC,YAAY;IACZ,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;mDAC7C;AAK5B;IAFC,YAAY;IACZ,QAAQ,CAAC,EAAC,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;mDAC5B;AAK7C;IAFC,YAAY;IACZ,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,sBAAsB,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;wDAC7C;AAGjC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC,CAAE,6CAA6C;;;gDAC1D;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\nimport {html, LitElement, PropertyValues, 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\nimport {ariaProperty} from '../../decorators/aria-property.js';\n\n/** @soyCompatible */\nexport class NavigationDrawer extends LitElement {\n  /* aria properties */\n  // tslint:disable-next-line:no-new-decorators\n  @ariaProperty\n  @property(\n      {type: String, attribute: 'data-aria-describedby', noAccessor: true})\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;\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  // tslint:disable-next-line:no-new-decorators\n  @ariaProperty\n  @property({type: String, attribute: 'data-aria-labelledby', noAccessor: true})\n  ariaLabelledBy: string|undefined;\n\n  @property({type: Boolean})  // tslint:disable-next-line:no-new-decorators\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  protected override updated(changedProperties:\n                                 PropertyValues<NavigationDrawer>) {\n    if (changedProperties.has('opened')) {\n      setTimeout(() => {\n        this.dispatchEvent(new CustomEvent(\n            'navigation-drawer-changed',\n            {detail: {opened: this.opened}, bubbles: true, composed: true}));\n      }, 250);\n    }\n  }\n}\n"]}

package/navigationdrawer/lib/shared-styles.css.d.ts

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

package/navigationdrawer/lib/shared-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `.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.md3-navigation-drawer-modal--opened{inline-size:var(--_container-width)}.md3-navigation-drawer-modal .md3-navigation-drawer-modal__slot-content{min-inline-size:var(--_container-width);max-inline-size:var(--_container-width)}/*# sourceMappingURL=shared-styles.css.map */
+`;
+//# sourceMappingURL=shared-styles.css.js.map

package/navigationdrawer/lib/shared-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-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-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.md3-navigation-drawer-modal--opened{inline-size:var(--_container-width)}.md3-navigation-drawer-modal .md3-navigation-drawer-modal__slot-content{min-inline-size:var(--_container-width);max-inline-size:var(--_container-width)}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}

package/navigationdrawer/lib/shared-styles.scss

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

package/navigationdrawer/navigation-drawer-modal.js

@@ -7,6 +7,7 @@ import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
 import { NavigationDrawerModal } from './lib/navigation-drawer-modal.js';
 import { styles } from './lib/navigation-drawer-modal-styles.css.js';
+import { styles as sharedStyles } from './lib/shared-styles.css.js';
 /**
  * @soyCompatible
  * @final
@@ -14,7 +15,7 @@ import { styles } from './lib/navigation-drawer-modal-styles.css.js';
  */
 let MdNavigationDrawerModal = class MdNavigationDrawerModal extends NavigationDrawerModal {
 };
-MdNavigationDrawerModal.styles = [styles];
+MdNavigationDrawerModal.styles = [sharedStyles, styles];
 MdNavigationDrawerModal = __decorate([
     customElement('md-navigation-drawer-modal')
 ], MdNavigationDrawerModal);

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-drawer-modal.js","sourceRoot":"","sources":["navigation-drawer-modal.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,qBAAqB,EAAC,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAC,MAAM,EAAC,MAAM,6CAA6C,CAAC;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"]}
+{"version":3,"file":"navigation-drawer-modal.js","sourceRoot":"","sources":["navigation-drawer-modal.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,qBAAqB,EAAC,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAC,MAAM,EAAC,MAAM,6CAA6C,CAAC;AACnE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;GAIG;AAEH,IAAa,uBAAuB,GAApC,MAAa,uBAAwB,SAAQ,qBAAqB;CAEjE,CAAA;AAD0B,8BAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAE,CAAA;AAD9C,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CAEnC;SAFY,uBAAuB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {NavigationDrawerModal} from './lib/navigation-drawer-modal.js';\nimport {styles} from './lib/navigation-drawer-modal-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-drawer-modal': MdNavigationDrawerModal;\n  }\n}\n\n/**\n * @soyCompatible\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/navigationdrawer/navigation-drawer.js

@@ -7,6 +7,7 @@ import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
 import { NavigationDrawer } from './lib/navigation-drawer.js';
 import { styles } from './lib/navigation-drawer-styles.css.js';
+import { styles as sharedStyles } from './lib/shared-styles.css.js';
 /**
  * @soyCompatible
  * @final
@@ -14,7 +15,7 @@ import { styles } from './lib/navigation-drawer-styles.css.js';
  */
 let MdNavigationDrawer = class MdNavigationDrawer extends NavigationDrawer {
 };
-MdNavigationDrawer.styles = [styles];
+MdNavigationDrawer.styles = [sharedStyles, styles];
 MdNavigationDrawer = __decorate([
     customElement('md-navigation-drawer')
 ], MdNavigationDrawer);

package/navigationdrawer/navigation-drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-drawer.js","sourceRoot":"","sources":["navigation-drawer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,gBAAgB,EAAC,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,uCAAuC,CAAC;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"]}
+{"version":3,"file":"navigation-drawer.js","sourceRoot":"","sources":["navigation-drawer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,gBAAgB,EAAC,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,uCAAuC,CAAC;AAC7D,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;GAIG;AAEH,IAAa,kBAAkB,GAA/B,MAAa,kBAAmB,SAAQ,gBAAgB;CAEvD,CAAA;AAD0B,yBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAE,CAAA;AAD9C,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAE9B;SAFY,kBAAkB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {NavigationDrawer} from './lib/navigation-drawer.js';\nimport {styles} from './lib/navigation-drawer-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-drawer': MdNavigationDrawer;\n  }\n}\n\n/**\n * @soyCompatible\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/navigationtab/_navigation-tab.scss

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

package/navigationtab/harness.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Harness } from '@material/web/testing/harness.js';
+import { Harness } from '../testing/harness.js';
 import { NavigationTab } from './lib/navigation-tab.js';
 /**
  * Test harness for navigation tab elements.

package/navigationtab/harness.js

@@ -3,7 +3,7 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Harness } from '@material/web/testing/harness.js';
+import { Harness } from '../testing/harness.js';
 /**
  * Test harness for navigation tab elements.
  */

package/navigationtab/harness.js.map

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