@material/web 1.0.0-pre.8 → 1.0.0

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

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

package/labs/navigationbar/navigation-bar.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-bar.js","sourceRoot":"","sources":["navigation-bar.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,aAAa,EAAC,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAC,MAAM,EAAC,MAAM,yCAAyC,CAAC;AAQ/D;;;GAGG;AAEI,WAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,aAAa;;AAChC,sBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AADvB,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAE3B","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {NavigationBar} from './internal/navigation-bar.js';\nimport {styles} from './internal/navigation-bar-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-bar': MdNavigationBar;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-navigation-bar')\nexport class MdNavigationBar extends NavigationBar {\n  static override styles = [styles];\n}\n"]}

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

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

package/labs/navigationdrawer/_navigation-drawer.scss

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

package/labs/navigationdrawer/internal/_navigation-drawer-modal.scss

@@ -0,0 +1,110 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../../elevation/elevation';
+@use '../../../internal/motion/animation';
+// go/keep-sorted end
+
+$_curve: animation.$standard-easing;
+$_delay: 0s;
+$_transition-duration: 0.25s;
+
+$_reference: (
+  'container-color': #fff,
+  'container-height': 100%,
+  'container-shape': 0 16px 16px 0,
+  '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) {
+  // $supported-tokens: tokens.$md-comp-navigation-drawer-modal-supported-tokens;
+
+  @each $token, $value in $tokens {
+    // @if list.index($supported-tokens, $token) == null {
+    //   @error 'Token `#{$token}` is not a supported token.';
+    // }
+
+    @if $value {
+      --md-navigation-drawer-modal-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: $_reference;
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-navigation-drawer-modal-#{$token}, #{$value});
+    }
+
+    @include elevation.theme(
+      (
+        'level': var(--_modal-container-elevation),
+      )
+    );
+  }
+
+  .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 $_transition-duration $_curve $_delay,
+      visibility $_delay $_curve $_transition-duration;
+  }
+
+  .md3-navigation-drawer-modal--opened {
+    transition: inline-size $_transition-duration $_curve $_delay,
+      visibility $_delay $_curve $_delay;
+  }
+
+  .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 $_transition-duration $_curve $_delay,
+      visibility $_delay $_curve $_transition-duration;
+  }
+
+  .md3-navigation-drawer-modal--scrim-visible {
+    visibility: visible;
+    opacity: var(--_scrim-opacity);
+
+    transition: opacity $_transition-duration $_curve $_delay,
+      visibility $_delay $_curve $_delay;
+  }
+}

package/labs/navigationdrawer/internal/_navigation-drawer.scss

@@ -0,0 +1,97 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+// go/keep-sorted start
+@use '../../../elevation/elevation';
+@use '../../../internal/motion/animation';
+// go/keep-sorted end
+
+$curve: animation.$standard-easing;
+$default: 0s;
+$delay: 0s;
+$transition-duration: 0.25s;
+
+$_reference: (
+  'container-color': #fff,
+  'container-height': 100%,
+  'container-shape': 0 16px 16px 0,
+  '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) {
+  // $supported-tokens: tokens.$md-comp-navigation-drawer-supported-tokens;
+
+  @each $token, $value in $tokens {
+    // @if list.index($supported-tokens, $token) == null {
+    //   @error 'Token `#{$token}` is not a supported token.';
+    // }
+
+    @if $value {
+      --md-navigation-drawer-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: $_reference;
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-navigation-drawer-#{$token}, #{$value});
+    }
+
+    @include elevation.theme(
+      (
+        'level': var(--_standard-container-elevation),
+        'shadow-color': var(--_divider-color),
+      )
+    );
+  }
+
+  :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 $transition-duration $curve $delay,
+      visibility $default $curve $transition-duration;
+  }
+
+  md-elevation {
+    z-index: 0;
+  }
+
+  .md3-navigation-drawer--opened {
+    visibility: visible;
+
+    transition: inline-size $transition-duration $curve $delay,
+      visibility $default $curve $default;
+  }
+
+  .md3-navigation-drawer--pivot-at-start {
+    justify-content: flex-start;
+  }
+
+  .md3-navigation-drawer__slot-content {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+}

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

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{--_container-color: var(--md-navigation-drawer-modal-container-color, #fff);--_container-height: var(--md-navigation-drawer-modal-container-height, 100%);--_container-shape: var(--md-navigation-drawer-modal-container-shape, 0 16px 16px 0);--_container-width: var(--md-navigation-drawer-modal-container-width, 360px);--_divider-color: var(--md-navigation-drawer-modal-divider-color, #000);--_modal-container-elevation: var(--md-navigation-drawer-modal-modal-container-elevation, 1);--_scrim-color: var(--md-navigation-drawer-modal-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);--md-elevation-level: var(--_modal-container-elevation)}.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--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;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/labs/navigationdrawer/internal/navigation-drawer-modal-styles.css.js.map

@@ -0,0 +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`:host{--_container-color: var(--md-navigation-drawer-modal-container-color, #fff);--_container-height: var(--md-navigation-drawer-modal-container-height, 100%);--_container-shape: var(--md-navigation-drawer-modal-container-shape, 0 16px 16px 0);--_container-width: var(--md-navigation-drawer-modal-container-width, 360px);--_divider-color: var(--md-navigation-drawer-modal-divider-color, #000);--_modal-container-elevation: var(--md-navigation-drawer-modal-modal-container-elevation, 1);--_scrim-color: var(--md-navigation-drawer-modal-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);--md-elevation-level: var(--_modal-container-elevation)}.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--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;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/labs/navigationdrawer/internal/navigation-drawer-modal.js

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

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

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

package/labs/navigationdrawer/internal/navigation-drawer-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{--_container-color: var(--md-navigation-drawer-container-color, #fff);--_container-height: var(--md-navigation-drawer-container-height, 100%);--_container-shape: var(--md-navigation-drawer-container-shape, 0 16px 16px 0);--_container-width: var(--md-navigation-drawer-container-width, 360px);--_divider-color: var(--md-navigation-drawer-divider-color, #000);--_modal-container-elevation: var(--md-navigation-drawer-modal-container-elevation, 1);--_standard-container-elevation: var(--md-navigation-drawer-standard-container-elevation, 0);--md-elevation-level: var(--_standard-container-elevation);--md-elevation-shadow-color: var(--_divider-color)}: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}md-elevation{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/labs/navigationdrawer/internal/navigation-drawer-styles.css.js.map

@@ -0,0 +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`:host{--_container-color: var(--md-navigation-drawer-container-color, #fff);--_container-height: var(--md-navigation-drawer-container-height, 100%);--_container-shape: var(--md-navigation-drawer-container-shape, 0 16px 16px 0);--_container-width: var(--md-navigation-drawer-container-width, 360px);--_divider-color: var(--md-navigation-drawer-divider-color, #000);--_modal-container-elevation: var(--md-navigation-drawer-modal-container-elevation, 1);--_standard-container-elevation: var(--md-navigation-drawer-standard-container-elevation, 0);--md-elevation-level: var(--_standard-container-elevation);--md-elevation-shadow-color: var(--_divider-color)}: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}md-elevation{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/labs/navigationdrawer/internal/navigation-drawer.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../../elevation/elevation.js';
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * TODO(b/265346501): add docs
+ */
+export declare class NavigationDrawer extends LitElement {
+    opened: boolean;
+    pivot: 'start' | 'end';
+    protected render(): import("lit-html").TemplateResult<1>;
+    private getRenderClasses;
+    protected updated(changedProperties: PropertyValues<NavigationDrawer>): void;
+}

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

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '../../../elevation/elevation.js';
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { requestUpdateOnAriaChange } from '../../../internal/aria/delegate.js';
+/**
+ * TODO(b/265346501): add docs
+ */
+export class NavigationDrawer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.opened = false;
+        this.pivot = 'end';
+    }
+    render() {
+        const ariaExpanded = this.opened ? 'true' : 'false';
+        const ariaHidden = !this.opened ? 'true' : 'false';
+        // Needed for closure conformance
+        const { ariaLabel, ariaModal } = this;
+        return html `
+      <div
+        aria-expanded="${ariaExpanded}"
+        aria-hidden="${ariaHidden}"
+        aria-label=${ariaLabel || nothing}
+        aria-modal="${ariaModal || nothing}"
+        class="md3-navigation-drawer ${this.getRenderClasses()}"
+        role="dialog">
+        <md-elevation></md-elevation>
+        <div class="md3-navigation-drawer__slot-content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+    getRenderClasses() {
+        return classMap({
+            'md3-navigation-drawer--opened': this.opened,
+            '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);
+        }
+    }
+}
+(() => {
+    requestUpdateOnAriaChange(NavigationDrawer);
+})();
+__decorate([
+    property({ type: Boolean })
+], NavigationDrawer.prototype, "opened", void 0);
+__decorate([
+    property()
+], NavigationDrawer.prototype, "pivot", void 0);
+//# sourceMappingURL=navigation-drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-drawer.js","sourceRoot":"","sources":["navigation-drawer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,iCAAiC,CAAC;AAEzC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,OAAO,EAAC,yBAAyB,EAAC,MAAM,oCAAoC,CAAC;AAE7E;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAAhD;;QAK6B,WAAM,GAAG,KAAK,CAAC;QAC9B,UAAK,GAAkB,KAAK,CAAC;IAwC3C,CAAC;IAtCoB,MAAM;QACvB,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACpD,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACnD,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAE,SAAS,EAAC,GAAG,IAAuB,CAAC;QACvD,OAAO,IAAI,CAAA;;yBAEU,YAAY;uBACd,UAAU;qBACZ,SAAS,IAAI,OAAO;sBACnB,SAAS,IAAI,OAAO;uCACH,IAAI,CAAC,gBAAgB,EAAE;;;;;;;KAOzD,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,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;AA7CC;IACE,yBAAyB,CAAC,gBAAgB,CAAC,CAAC;AAC9C,CAAC,GAAA,CAAA;AAE0B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;gDAAgB;AAC9B;IAAX,QAAQ,EAAE;+CAA8B","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../elevation/elevation.js';\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';\n\n/**\n * TODO(b/265346501): add docs\n */\nexport class NavigationDrawer extends LitElement {\n  static {\n    requestUpdateOnAriaChange(NavigationDrawer);\n  }\n\n  @property({type: Boolean}) opened = false;\n  @property() pivot: 'start'|'end' = 'end';\n\n  protected override render() {\n    const ariaExpanded = this.opened ? 'true' : 'false';\n    const ariaHidden = !this.opened ? 'true' : 'false';\n    // Needed for closure conformance\n    const {ariaLabel, ariaModal} = this as ARIAMixinStrict;\n    return html`\n      <div\n        aria-expanded=\"${ariaExpanded}\"\n        aria-hidden=\"${ariaHidden}\"\n        aria-label=${ariaLabel || nothing}\n        aria-modal=\"${ariaModal || nothing}\"\n        class=\"md3-navigation-drawer ${this.getRenderClasses()}\"\n        role=\"dialog\">\n        <md-elevation></md-elevation>\n        <div class=\"md3-navigation-drawer__slot-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private 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/labs/navigationdrawer/navigation-drawer-modal.d.ts

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-drawer-modal.js","sourceRoot":"","sources":["navigation-drawer-modal.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,qBAAqB,EAAC,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAAC,MAAM,EAAC,MAAM,kDAAkD,CAAC;AACxE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;GAGG;AAEI,WAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,qBAAqB;;AACvC,8BAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,AAAzB,CAA0B;AAD9C,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CAEnC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {NavigationDrawerModal} from './internal/navigation-drawer-modal.js';\nimport {styles} from './internal/navigation-drawer-modal-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-drawer-modal': MdNavigationDrawerModal;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-navigation-drawer-modal')\nexport class MdNavigationDrawerModal extends NavigationDrawerModal {\n  static override readonly styles = [sharedStyles, styles];\n}\n"]}

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

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

package/labs/navigationdrawer/navigation-drawer.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-drawer.js","sourceRoot":"","sources":["navigation-drawer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAC,MAAM,EAAC,MAAM,4CAA4C,CAAC;AAClE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;GAGG;AAEI,WAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,gBAAgB;;AAC7B,yBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,AAAzB,CAA0B;AAD9C,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAE9B","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {NavigationDrawer} from './internal/navigation-drawer.js';\nimport {styles} from './internal/navigation-drawer-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-drawer': MdNavigationDrawer;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-navigation-drawer')\nexport class MdNavigationDrawer extends NavigationDrawer {\n  static override readonly styles = [sharedStyles, styles];\n}\n"]}

package/labs/navigationtab/_navigation-tab.scss

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

package/labs/navigationtab/harness.d.ts

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

package/labs/navigationtab/harness.js

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

package/labs/navigationtab/harness.js.map

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