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

package/menusurface/lib/menu-surface-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-surface-styles.css.js","sourceRoot":"","sources":["menu-surface-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-menu-surface{box-sizing:border-box;display:none;opacity:0;overflow:auto;margin:0;max-height:calc(100vh - 32px);max-width:calc(100vw - 32px);padding:0;position:absolute;transform:scale(1);transform-origin:top left;transition:opacity .03s linear,transform .12s cubic-bezier(0, 0, 0.2, 1),height 250ms cubic-bezier(0, 0, 0.2, 1);will-change:transform,opacity;z-index:8}.md3-menu-surface .md3-elevation-overlay{z-index:0}.md3-menu-surface:focus{outline:none}.md3-menu-surface--animating-open{display:inline-block;opacity:0;transform:scale(0.8)}.md3-menu-surface--open{display:inline-block;opacity:1;transform:scale(1)}.md3-menu-surface--animating-closed{display:inline-block;opacity:0;transition:opacity .075s linear}.md3-menu-surface--anchor{overflow:visible;position:relative}.md3-menu-surface--fixed{position:fixed}.md3-menu-surface--fullwidth{width:100%}.md3-menu-surface--is-open-below{border-top-left-radius:0px;border-top-right-radius:0px}.md3-menu-surface{--md-elevation-box-shadow-for-gss:0px 1px 2px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 2px 6px 2px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-menu-surface-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss));border-radius:var(--md-menu-surface-container-shape, 4px)}/*# sourceMappingURL=menu-surface-styles.css.map */\n`;\n "]}
+{"version":3,"file":"menu-surface-styles.css.js","sourceRoot":"","sources":["menu-surface-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-elevation-shadow: var(--md-menu-surface-container-elevation-shadow, 0px 1px 2px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 2px 6px 2px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15));--_container-shape: var(--md-menu-surface-container-shape, 4px)}.md3-menu-surface{border-radius:var(--_container-shape);box-sizing:border-box;display:none;opacity:0;overflow:auto;margin:0;max-height:calc(100vh - 32px);max-width:calc(100vw - 32px);padding:0;position:absolute;transform:scale(1);transform-origin:top left;transition:opacity .03s linear,transform .12s cubic-bezier(0, 0, 0.2, 1),height 250ms cubic-bezier(0, 0, 0.2, 1);will-change:transform,opacity;z-index:8;box-shadow:var(--_container-elevation-shadow)}.md3-menu-surface .md3-elevation-overlay{z-index:0}.md3-menu-surface:focus{outline:none}.md3-menu-surface--animating-open{display:inline-block;opacity:0;transform:scale(0.8)}.md3-menu-surface--open{display:inline-block;opacity:1;transform:scale(1)}.md3-menu-surface--animating-closed{display:inline-block;opacity:0;transition:opacity .075s linear}.md3-menu-surface--anchor{overflow:visible;position:relative}.md3-menu-surface--fixed{position:fixed}.md3-menu-surface--fullwidth{width:100%}.md3-menu-surface--is-open-below{border-top-left-radius:0px;border-top-right-radius:0px}/*# sourceMappingURL=menu-surface-styles.css.map */\n`;\n "]}

package/menusurface/lib/menu-surface-styles.scss

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

package/menusurface/lib/menu-surface.d.ts

@@ -3,7 +3,8 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
 import { MDCMenuSurfaceAdapter } from './adapter.js';
 import { Corner as CornerEnum } from './constants.js';
 import { MDCMenuSurfaceFoundation } from './foundation.js';
@@ -28,7 +29,6 @@ export declare abstract class MenuSurface extends LitElement {
     open: boolean;
     stayOpenOnBodyClick: boolean;
     skipRestoreFocus: boolean;
-    protected bitwiseCorner: CornerEnum;
     protected previousFlipMenuHorizontally: boolean;
     /**
      * Whether to align the menu surface to the opposite side of the default
@@ -47,6 +47,9 @@ export declare abstract class MenuSurface extends LitElement {
     protected previousAnchor: HTMLElement | null;
     protected onBodyClickBound: (evt: MouseEvent) => void;
     render(): import("lit-html").TemplateResult<1>;
+    /** @soyTemplate */
+    protected getRenderClasses(): ClassInfo;
+    protected updated(changedProperties: PropertyValues<MenuSurface>): void;
     protected firstUpdated(): void;
     createAdapter(): MDCMenuSurfaceAdapter;
     protected onKeydown(evt: KeyboardEvent): void;

package/menusurface/lib/menu-surface.js

@@ -6,13 +6,11 @@
 import { __decorate, __metadata } from "tslib";
 // Style preference for leading underscores.
 // tslint:disable:strip-private-property-underscore
-// TODO(b/239222919): remove compat dependencies
-import { observer } from '@material/web/compat/base/observer.js';
-import { deepActiveElementPath, doesElementContainFocus } from '@material/web/compat/base/utils.js';
 import { html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { isRtl } from '../../controller/is-rtl.js';
 import { Corner as CornerEnum } from './constants.js';
 import { MDCMenuSurfaceFoundation } from './foundation.js';
 // tslint:disable:no-bitwise
@@ -44,7 +42,6 @@ export class MenuSurface extends LitElement {
         this.open = false;
         this.stayOpenOnBodyClick = false;
         this.skipRestoreFocus = false;
-        this.bitwiseCorner = CornerEnum.TOP_START;
         this.previousFlipMenuHorizontally = false;
         /**
          * Whether to align the menu surface to the opposite side of the default
@@ -64,10 +61,6 @@ export class MenuSurface extends LitElement {
         this.onBodyClickBound = () => undefined;
     }
     render() {
-        const classes = {
-            'md3-menu-surface--fixed': this.fixed,
-            'md3-menu-surface--fullwidth': this.fullwidth,
-        };
         const styles = {
             'top': this.styleTop,
             'left': this.styleLeft,
@@ -78,7 +71,7 @@ export class MenuSurface extends LitElement {
         };
         return html `
       <div
-          class="md3-menu-surface ${classMap(classes)}"
+          class="md3-menu-surface ${classMap(this.getRenderClasses())}"
           style="${styleMap(styles)}"
           @keydown=${this.onKeydown}
           @opened=${this.registerBodyClick}
@@ -86,6 +79,49 @@ export class MenuSurface extends LitElement {
         <slot></slot>
       </div>`;
     }
+    /** @soyTemplate */
+    getRenderClasses() {
+        return {
+            'md3-menu-surface--fixed': this.fixed,
+            'md3-menu-surface--fullwidth': this.fullwidth,
+        };
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('absolute') && !this.fixed) {
+            this.mdcFoundation.setIsHoisted(this.absolute);
+        }
+        if (changedProperties.has('fixed') && !this.absolute) {
+            this.mdcFoundation.setFixedPosition(this.fixed);
+        }
+        if ((changedProperties.has('x') || changedProperties.has('y')) &&
+            this.x !== null && this.y !== null) {
+            this.mdcFoundation.setAbsolutePosition(this.x, this.y);
+            this.mdcFoundation.setAnchorMargin({ left: this.x, top: this.y, right: -this.y, bottom: this.y });
+        }
+        if (changedProperties.has('quick')) {
+            this.mdcFoundation.setQuickOpen(this.quick);
+        }
+        if (changedProperties.has('open')) {
+            const wasOpen = changedProperties.get('open');
+            if (this.open) {
+                this.mdcFoundation.open();
+                // wasOpen helps with first render (when it is `undefined`) perf
+            }
+            else if (wasOpen !== undefined) {
+                this.mdcFoundation.close(this.skipRestoreFocus);
+            }
+        }
+        if (changedProperties.has('flipMenuHorizontally')) {
+            if (this.previousFlipMenuHorizontally !== this.flipMenuHorizontally) {
+                this.mdcFoundation.flipCornerHorizontally();
+            }
+            this.previousFlipMenuHorizontally = this.flipMenuHorizontally;
+        }
+        if (changedProperties.has('corner') && this.corner) {
+            const bitwiseCorner = stringToCorner[this.corner];
+            this.mdcFoundation.setAnchorCorner(bitwiseCorner);
+        }
+    }
     firstUpdated() {
         if (this.mdcFoundation !== undefined) {
             this.mdcFoundation.destroy();
@@ -128,12 +164,7 @@ export class MenuSurface extends LitElement {
                 this.mdcRoot.dispatchEvent(ev);
             },
             isElementInContainer: () => false,
-            isRtl: () => {
-                if (this.mdcRoot) {
-                    return getComputedStyle(this.mdcRoot).direction === 'rtl';
-                }
-                return false;
-            },
+            isRtl: () => this.mdcRoot ? isRtl(this.mdcRoot) : false,
             setTransformOrigin: (origin) => {
                 const root = this.mdcRoot;
                 if (!root) {
@@ -142,15 +173,10 @@ export class MenuSurface extends LitElement {
                 this.styleTransformOrigin = origin;
             },
             isFocused: () => {
-                return doesElementContainFocus(this);
+                return this.matches(':focus-within');
             },
             saveFocus: () => {
-                const activeElementPath = deepActiveElementPath();
-                const pathLength = activeElementPath.length;
-                if (!pathLength) {
-                    this.previouslyFocused = null;
-                }
-                this.previouslyFocused = activeElementPath[pathLength - 1];
+                this.previouslyFocused = document.activeElement;
             },
             restoreFocus: () => {
                 if (!this.previouslyFocused) {
@@ -250,11 +276,6 @@ __decorate([
 ], MenuSurface.prototype, "slotElement", void 0);
 __decorate([
     property({ type: Boolean }),
-    observer(function (isAbsolute) {
-        if (this.mdcFoundation && !this.fixed) {
-            this.mdcFoundation.setIsHoisted(isAbsolute);
-        }
-    }),
     __metadata("design:type", Object)
 ], MenuSurface.prototype, "absolute", void 0);
 __decorate([
@@ -263,55 +284,22 @@ __decorate([
 ], MenuSurface.prototype, "fullwidth", void 0);
 __decorate([
     property({ type: Boolean }),
-    observer(function (isFixed) {
-        if (this.mdcFoundation && !this.absolute) {
-            this.mdcFoundation.setFixedPosition(isFixed);
-        }
-    }),
     __metadata("design:type", Object)
 ], MenuSurface.prototype, "fixed", void 0);
 __decorate([
     property({ type: Number }),
-    observer(function (value) {
-        if (this.mdcFoundation && this.y !== null && value !== null) {
-            this.mdcFoundation.setAbsolutePosition(value, this.y);
-            this.mdcFoundation.setAnchorMargin({ left: value, top: this.y, right: -value, bottom: this.y });
-        }
-    }),
     __metadata("design:type", Number)
 ], MenuSurface.prototype, "x", void 0);
 __decorate([
     property({ type: Number }),
-    observer(function (value) {
-        if (this.mdcFoundation && this.x !== null && value !== null) {
-            this.mdcFoundation.setAbsolutePosition(this.x, value);
-            this.mdcFoundation.setAnchorMargin({ left: this.x, top: value, right: -this.x, bottom: value });
-        }
-    }),
     __metadata("design:type", Number)
 ], MenuSurface.prototype, "y", void 0);
 __decorate([
     property({ type: Boolean }),
-    observer(function (value) {
-        if (this.mdcFoundation) {
-            this.mdcFoundation.setQuickOpen(value);
-        }
-    }),
     __metadata("design:type", Object)
 ], MenuSurface.prototype, "quick", void 0);
 __decorate([
     property({ type: Boolean, reflect: true }),
-    observer(function (isOpen, wasOpen) {
-        if (this.mdcFoundation) {
-            if (isOpen) {
-                this.mdcFoundation.open();
-                // wasOpen helps with first render (when it is `undefined`) perf
-            }
-            else if (wasOpen !== undefined) {
-                this.mdcFoundation.close(this.skipRestoreFocus);
-            }
-        }
-    }),
     __metadata("design:type", Object)
 ], MenuSurface.prototype, "open", void 0);
 __decorate([
@@ -323,40 +311,11 @@ __decorate([
     __metadata("design:type", Object)
 ], MenuSurface.prototype, "skipRestoreFocus", void 0);
 __decorate([
-    state(),
-    observer(function (value) {
-        if (this.mdcFoundation) {
-            if (value) {
-                this.mdcFoundation.setAnchorCorner(value);
-            }
-            else {
-                this.mdcFoundation.setAnchorCorner(value);
-            }
-        }
-    }),
-    __metadata("design:type", Number)
-], MenuSurface.prototype, "bitwiseCorner", void 0);
-__decorate([
-    observer(function (flipMenuHorizontally) {
-        if (!this.mdcFoundation)
-            return;
-        if (this.previousFlipMenuHorizontally !== flipMenuHorizontally) {
-            this.mdcFoundation.flipCornerHorizontally();
-        }
-        this.previousFlipMenuHorizontally = flipMenuHorizontally;
-    }),
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], MenuSurface.prototype, "flipMenuHorizontally", void 0);
 __decorate([
     property({ type: String }),
-    observer(function (value) {
-        if (this.mdcFoundation) {
-            if (value) {
-                this.bitwiseCorner = stringToCorner[value];
-            }
-        }
-    }),
     __metadata("design:type", String)
 ], MenuSurface.prototype, "corner", void 0);
 __decorate([

package/menusurface/lib/menu-surface.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-surface.js","sourceRoot":"","sources":["menu-surface.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Style preference for leading underscores.\n// tslint:disable:strip-private-property-underscore\n\n// TODO(b/239222919): remove compat dependencies\nimport {observer} from '@material/web/compat/base/observer.js';\nimport {deepActiveElementPath, doesElementContainFocus} from '@material/web/compat/base/utils.js';\nimport {html, LitElement} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {MDCMenuSurfaceAdapter} from './adapter.js';\nimport {Corner as CornerEnum} from './constants.js';\nimport {MDCMenuSurfaceFoundation} from './foundation.js';\n\nexport type Corner = keyof typeof CornerEnum;\nexport type AnchorableElement = HTMLElement&{anchor: Element | null};\n\n// tslint:disable:no-bitwise\n\n// required for closure compiler\nconst stringToCorner = {\n  'TOP_LEFT': CornerEnum.TOP_LEFT,\n  'TOP_RIGHT': CornerEnum.TOP_RIGHT,\n  'BOTTOM_LEFT': CornerEnum.BOTTOM_LEFT,\n  'BOTTOM_RIGHT': CornerEnum.BOTTOM_RIGHT,\n  'TOP_START': CornerEnum.TOP_START,\n  'TOP_END': CornerEnum.TOP_END,\n  'BOTTOM_START': CornerEnum.BOTTOM_START,\n  'BOTTOM_END': CornerEnum.BOTTOM_END,\n};\n\n/**\n * @fires opened\n * @fires closed\n */\nexport abstract class MenuSurface extends LitElement {\n  protected mdcFoundation!: MDCMenuSurfaceFoundation;\n\n  @query('.md3-menu-surface') mdcRoot!: HTMLDivElement;\n\n  @query('slot') slotElement!: HTMLSlotElement|null;\n\n  @property({type: Boolean})\n  @observer(function(this: MenuSurface, isAbsolute: boolean) {\n    if (this.mdcFoundation && !this.fixed) {\n      this.mdcFoundation.setIsHoisted(isAbsolute);\n    }\n  })\n  absolute = false;\n\n  @property({type: Boolean}) fullwidth = false;\n\n  @property({type: Boolean})\n  @observer(function(this: MenuSurface, isFixed: boolean) {\n    if (this.mdcFoundation && !this.absolute) {\n      this.mdcFoundation.setFixedPosition(isFixed);\n    }\n  })\n  fixed = false;\n\n  @property({type: Number})\n  @observer(function(this: MenuSurface, value: number|null) {\n    if (this.mdcFoundation && this.y !== null && value !== null) {\n      this.mdcFoundation.setAbsolutePosition(value, this.y);\n      this.mdcFoundation.setAnchorMargin(\n          {left: value, top: this.y, right: -value, bottom: this.y});\n    }\n  })\n  x: number|null = null;\n\n  @property({type: Number})\n  @observer(function(this: MenuSurface, value: number|null) {\n    if (this.mdcFoundation && this.x !== null && value !== null) {\n      this.mdcFoundation.setAbsolutePosition(this.x, value);\n      this.mdcFoundation.setAnchorMargin(\n          {left: this.x, top: value, right: -this.x, bottom: value});\n    }\n  })\n  y: number|null = null;\n\n  // must be defined before open or else race condition in foundation occurs.\n  @property({type: Boolean})\n  @observer(function(this: MenuSurface, value: boolean) {\n    if (this.mdcFoundation) {\n      this.mdcFoundation.setQuickOpen(value);\n    }\n  })\n  quick = false;\n\n  @property({type: Boolean, reflect: true})\n  @observer(function(this: MenuSurface, isOpen: boolean, wasOpen: boolean) {\n    if (this.mdcFoundation) {\n      if (isOpen) {\n        this.mdcFoundation.open();\n        // wasOpen helps with first render (when it is `undefined`) perf\n      } else if (wasOpen !== undefined) {\n        this.mdcFoundation.close(this.skipRestoreFocus);\n      }\n    }\n  })\n  open = false;\n\n  @property({type: Boolean}) stayOpenOnBodyClick = false;\n\n  @property({type: Boolean}) skipRestoreFocus = false;\n\n  @state()\n  @observer(function(this: MenuSurface, value: CornerEnum) {\n    if (this.mdcFoundation) {\n      if (value) {\n        this.mdcFoundation.setAnchorCorner(value);\n      } else {\n        this.mdcFoundation.setAnchorCorner(value);\n      }\n    }\n  })\n  protected bitwiseCorner: CornerEnum = CornerEnum.TOP_START;\n\n  protected previousFlipMenuHorizontally = false;\n\n  /**\n   * Whether to align the menu surface to the opposite side of the default\n   * alignment.\n   */\n  @observer(function(this: MenuSurface, flipMenuHorizontally: boolean) {\n    if (!this.mdcFoundation) return;\n\n    if (this.previousFlipMenuHorizontally !== flipMenuHorizontally) {\n      this.mdcFoundation.flipCornerHorizontally();\n    }\n    this.previousFlipMenuHorizontally = flipMenuHorizontally;\n  })\n  @property({type: Boolean})\n  flipMenuHorizontally = false;\n\n  @property({type: String})\n  @observer(function(this: MenuSurface, value: Corner) {\n    if (this.mdcFoundation) {\n      if (value) {\n        this.bitwiseCorner = stringToCorner[value];\n      }\n    }\n  })\n  corner: Corner = 'BOTTOM_START';\n\n  @state() protected styleTop = '';\n  @state() protected styleLeft = '';\n  @state() protected styleRight = '';\n  @state() protected styleBottom = '';\n  @state() protected styleMaxHeight = '';\n  @state() protected styleTransformOrigin = '';\n\n  anchor: HTMLElement|null = null;\n\n  protected previouslyFocused: HTMLElement|Element|null = null;\n  protected previousAnchor: HTMLElement|null = null;\n  protected onBodyClickBound: (evt: MouseEvent) => void = () => undefined;\n\n  override render() {\n    const classes = {\n      'md3-menu-surface--fixed': this.fixed,\n      'md3-menu-surface--fullwidth': this.fullwidth,\n    };\n\n    const styles = {\n      'top': this.styleTop,\n      'left': this.styleLeft,\n      'right': this.styleRight,\n      'bottom': this.styleBottom,\n      'max-height': this.styleMaxHeight,\n      'transform-origin': this.styleTransformOrigin,\n    };\n\n    return html`\n      <div\n          class=\"md3-menu-surface ${classMap(classes)}\"\n          style=\"${styleMap(styles)}\"\n          @keydown=${this.onKeydown}\n          @opened=${this.registerBodyClick}\n          @closed=${this.deregisterBodyClick}>\n        <slot></slot>\n      </div>`;\n  }\n\n  protected override firstUpdated() {\n    if (this.mdcFoundation !== undefined) {\n      this.mdcFoundation.destroy();\n    }\n\n    this.mdcFoundation = new MDCMenuSurfaceFoundation(this.createAdapter());\n    this.mdcFoundation.init();\n  }\n\n  createAdapter(): MDCMenuSurfaceAdapter {\n    return {\n      addClass: (className: string) => {\n        this.mdcRoot.classList.add(className);\n      },\n      removeClass: (className: string) => {\n        this.mdcRoot.classList.remove(className);\n      },\n      hasClass: (className: string) =>\n          this.mdcRoot.classList.contains(className),\n      hasAnchor: () => {\n        return !!this.anchor;\n      },\n      notifyClose: () => {\n        const init: CustomEventInit = {bubbles: true, composed: true};\n        const ev = new CustomEvent('closed', init);\n        this.open = false;\n        this.mdcRoot.dispatchEvent(ev);\n      },\n      notifyClosing: () => {\n        const init: CustomEventInit = {bubbles: true, composed: true};\n        const ev = new CustomEvent('closing', init);\n        this.mdcRoot.dispatchEvent(ev);\n      },\n      notifyOpen: () => {\n        const init: CustomEventInit = {bubbles: true, composed: true};\n        const ev = new CustomEvent('opened', init);\n        this.open = true;\n        this.mdcRoot.dispatchEvent(ev);\n      },\n      notifyOpening: () => {\n        const init: CustomEventInit = {bubbles: true, composed: true};\n        const ev = new CustomEvent('opening', init);\n        this.mdcRoot.dispatchEvent(ev);\n      },\n      isElementInContainer: () => false,\n      isRtl: () => {\n        if (this.mdcRoot) {\n          return getComputedStyle(this.mdcRoot).direction === 'rtl';\n        }\n\n        return false;\n      },\n      setTransformOrigin: (origin) => {\n        const root = this.mdcRoot;\n        if (!root) {\n          return;\n        }\n\n        this.styleTransformOrigin = origin;\n      },\n      isFocused: () => {\n        return doesElementContainFocus(this);\n      },\n      saveFocus: () => {\n        const activeElementPath = deepActiveElementPath();\n        const pathLength = activeElementPath.length;\n\n        if (!pathLength) {\n          this.previouslyFocused = null;\n        }\n\n        this.previouslyFocused = activeElementPath[pathLength - 1];\n      },\n      restoreFocus: () => {\n        if (!this.previouslyFocused) {\n          return;\n        }\n\n        if ('focus' in this.previouslyFocused) {\n          this.previouslyFocused.focus();\n        }\n      },\n      getInnerDimensions: () => {\n        const mdcRoot = this.mdcRoot;\n\n        if (!mdcRoot) {\n          return {width: 0, height: 0};\n        }\n\n        return {width: mdcRoot.offsetWidth, height: mdcRoot.offsetHeight};\n      },\n      getAnchorDimensions: () => {\n        const anchorElement = this.anchor;\n\n        return anchorElement ? anchorElement.getBoundingClientRect() : null;\n      },\n      getBodyDimensions: () => {\n        return {\n          width: document.body.clientWidth,\n          height: document.body.clientHeight,\n        };\n      },\n      getWindowDimensions: () => {\n        return {\n          width: window.innerWidth,\n          height: window.innerHeight,\n        };\n      },\n      getWindowScroll: () => {\n        return {\n          x: window.pageXOffset,\n          y: window.pageYOffset,\n        };\n      },\n      setPosition: (position) => {\n        const mdcRoot = this.mdcRoot;\n\n        if (!mdcRoot) {\n          return;\n        }\n\n        this.styleLeft = 'left' in position ? `${position.left}px` : '';\n        this.styleRight = 'right' in position ? `${position.right}px` : '';\n        this.styleTop = 'top' in position ? `${position.top}px` : '';\n        this.styleBottom = 'bottom' in position ? `${position.bottom}px` : '';\n      },\n      setMaxHeight: async (height) => {\n        const mdcRoot = this.mdcRoot;\n\n        if (!mdcRoot) {\n          return;\n        }\n\n        // must set both for IE support as IE will not set a var\n        this.styleMaxHeight = height;\n        await this.updateComplete;\n        this.styleMaxHeight = `var(--md3-menu-max-height, ${height})`;\n      },\n    };\n  }\n\n  protected onKeydown(evt: KeyboardEvent) {\n    if (this.mdcFoundation) {\n      this.mdcFoundation.handleKeydown(evt);\n    }\n  }\n\n  protected onBodyClick(evt: MouseEvent) {\n    if (this.stayOpenOnBodyClick) {\n      return;\n    }\n    const path = evt.composedPath();\n    if (path.indexOf(this) === -1) {\n      this.close();\n    }\n  }\n\n  protected registerBodyClick() {\n    this.onBodyClickBound = this.onBodyClick.bind(this);\n    // capture otherwise listener closes menu after quick menu opens\n    document.body.addEventListener(\n        'click', this.onBodyClickBound, {passive: true, capture: true});\n  }\n\n  protected deregisterBodyClick() {\n    document.body.removeEventListener(\n        'click', this.onBodyClickBound, {capture: true});\n  }\n\n  close() {\n    this.open = false;\n  }\n\n  show() {\n    this.open = true;\n  }\n}\n"]}
+{"version":3,"file":"menu-surface.js","sourceRoot":"","sources":["menu-surface.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Style preference for leading underscores.\n// tslint:disable:strip-private-property-underscore\n\nimport {html, LitElement, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {isRtl} from '../../controller/is-rtl.js';\n\nimport {MDCMenuSurfaceAdapter} from './adapter.js';\nimport {Corner as CornerEnum} from './constants.js';\nimport {MDCMenuSurfaceFoundation} from './foundation.js';\n\nexport type Corner = keyof typeof CornerEnum;\nexport type AnchorableElement = HTMLElement&{anchor: Element | null};\n\n// tslint:disable:no-bitwise\n\n// required for closure compiler\nconst stringToCorner = {\n  'TOP_LEFT': CornerEnum.TOP_LEFT,\n  'TOP_RIGHT': CornerEnum.TOP_RIGHT,\n  'BOTTOM_LEFT': CornerEnum.BOTTOM_LEFT,\n  'BOTTOM_RIGHT': CornerEnum.BOTTOM_RIGHT,\n  'TOP_START': CornerEnum.TOP_START,\n  'TOP_END': CornerEnum.TOP_END,\n  'BOTTOM_START': CornerEnum.BOTTOM_START,\n  'BOTTOM_END': CornerEnum.BOTTOM_END,\n};\n\n/**\n * @fires opened\n * @fires closed\n */\nexport abstract class MenuSurface extends LitElement {\n  protected mdcFoundation!: MDCMenuSurfaceFoundation;\n\n  @query('.md3-menu-surface') mdcRoot!: HTMLDivElement;\n\n  @query('slot') slotElement!: HTMLSlotElement|null;\n\n  @property({type: Boolean}) absolute = false;\n\n  @property({type: Boolean}) fullwidth = false;\n\n  @property({type: Boolean}) fixed = false;\n\n  @property({type: Number}) x: number|null = null;\n\n  @property({type: Number}) y: number|null = null;\n\n  // must be defined before open or else race condition in foundation occurs.\n  @property({type: Boolean}) quick = false;\n\n  @property({type: Boolean, reflect: true}) open = false;\n\n  @property({type: Boolean}) stayOpenOnBodyClick = false;\n\n  @property({type: Boolean}) skipRestoreFocus = false;\n\n  protected previousFlipMenuHorizontally = false;\n\n  /**\n   * Whether to align the menu surface to the opposite side of the default\n   * alignment.\n   */\n  @property({type: Boolean}) flipMenuHorizontally = false;\n\n  @property({type: String}) corner: Corner = 'BOTTOM_START';\n\n  @state() protected styleTop = '';\n  @state() protected styleLeft = '';\n  @state() protected styleRight = '';\n  @state() protected styleBottom = '';\n  @state() protected styleMaxHeight = '';\n  @state() protected styleTransformOrigin = '';\n\n  anchor: HTMLElement|null = null;\n\n  protected previouslyFocused: HTMLElement|Element|null = null;\n  protected previousAnchor: HTMLElement|null = null;\n  protected onBodyClickBound: (evt: MouseEvent) => void = () => undefined;\n\n  override render() {\n    const styles = {\n      'top': this.styleTop,\n      'left': this.styleLeft,\n      'right': this.styleRight,\n      'bottom': this.styleBottom,\n      'max-height': this.styleMaxHeight,\n      'transform-origin': this.styleTransformOrigin,\n    };\n\n    return html`\n      <div\n          class=\"md3-menu-surface ${classMap(this.getRenderClasses())}\"\n          style=\"${styleMap(styles)}\"\n          @keydown=${this.onKeydown}\n          @opened=${this.registerBodyClick}\n          @closed=${this.deregisterBodyClick}>\n        <slot></slot>\n      </div>`;\n  }\n\n  /** @soyTemplate */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-menu-surface--fixed': this.fixed,\n      'md3-menu-surface--fullwidth': this.fullwidth,\n    };\n  }\n\n  protected override updated(changedProperties: PropertyValues<MenuSurface>) {\n    if (changedProperties.has('absolute') && !this.fixed) {\n      this.mdcFoundation.setIsHoisted(this.absolute);\n    }\n\n    if (changedProperties.has('fixed') && !this.absolute) {\n      this.mdcFoundation.setFixedPosition(this.fixed);\n    }\n\n    if ((changedProperties.has('x') || changedProperties.has('y')) &&\n        this.x !== null && this.y !== null) {\n      this.mdcFoundation.setAbsolutePosition(this.x, this.y);\n      this.mdcFoundation.setAnchorMargin(\n          {left: this.x, top: this.y, right: -this.y, bottom: this.y});\n    }\n\n    if (changedProperties.has('quick')) {\n      this.mdcFoundation.setQuickOpen(this.quick);\n    }\n\n    if (changedProperties.has('open')) {\n      const wasOpen = changedProperties.get('open');\n      if (this.open) {\n        this.mdcFoundation.open();\n        // wasOpen helps with first render (when it is `undefined`) perf\n      } else if (wasOpen !== undefined) {\n        this.mdcFoundation.close(this.skipRestoreFocus);\n      }\n    }\n\n    if (changedProperties.has('flipMenuHorizontally')) {\n      if (this.previousFlipMenuHorizontally !== this.flipMenuHorizontally) {\n        this.mdcFoundation.flipCornerHorizontally();\n      }\n      this.previousFlipMenuHorizontally = this.flipMenuHorizontally;\n    }\n\n    if (changedProperties.has('corner') && this.corner) {\n      const bitwiseCorner = stringToCorner[this.corner];\n      this.mdcFoundation.setAnchorCorner(bitwiseCorner);\n    }\n  }\n\n  protected override firstUpdated() {\n    if (this.mdcFoundation !== undefined) {\n      this.mdcFoundation.destroy();\n    }\n\n    this.mdcFoundation = new MDCMenuSurfaceFoundation(this.createAdapter());\n    this.mdcFoundation.init();\n  }\n\n  createAdapter(): MDCMenuSurfaceAdapter {\n    return {\n      addClass: (className: string) => {\n        this.mdcRoot.classList.add(className);\n      },\n      removeClass: (className: string) => {\n        this.mdcRoot.classList.remove(className);\n      },\n      hasClass: (className: string) =>\n          this.mdcRoot.classList.contains(className),\n      hasAnchor: () => {\n        return !!this.anchor;\n      },\n      notifyClose: () => {\n        const init: CustomEventInit = {bubbles: true, composed: true};\n        const ev = new CustomEvent('closed', init);\n        this.open = false;\n        this.mdcRoot.dispatchEvent(ev);\n      },\n      notifyClosing: () => {\n        const init: CustomEventInit = {bubbles: true, composed: true};\n        const ev = new CustomEvent('closing', init);\n        this.mdcRoot.dispatchEvent(ev);\n      },\n      notifyOpen: () => {\n        const init: CustomEventInit = {bubbles: true, composed: true};\n        const ev = new CustomEvent('opened', init);\n        this.open = true;\n        this.mdcRoot.dispatchEvent(ev);\n      },\n      notifyOpening: () => {\n        const init: CustomEventInit = {bubbles: true, composed: true};\n        const ev = new CustomEvent('opening', init);\n        this.mdcRoot.dispatchEvent(ev);\n      },\n      isElementInContainer: () => false,\n      isRtl: () => this.mdcRoot ? isRtl(this.mdcRoot) : false,\n      setTransformOrigin: (origin) => {\n        const root = this.mdcRoot;\n        if (!root) {\n          return;\n        }\n\n        this.styleTransformOrigin = origin;\n      },\n      isFocused: () => {\n        return this.matches(':focus-within');\n      },\n      saveFocus: () => {\n        this.previouslyFocused = document.activeElement;\n      },\n      restoreFocus: () => {\n        if (!this.previouslyFocused) {\n          return;\n        }\n\n        if ('focus' in this.previouslyFocused) {\n          this.previouslyFocused.focus();\n        }\n      },\n      getInnerDimensions: () => {\n        const mdcRoot = this.mdcRoot;\n\n        if (!mdcRoot) {\n          return {width: 0, height: 0};\n        }\n\n        return {width: mdcRoot.offsetWidth, height: mdcRoot.offsetHeight};\n      },\n      getAnchorDimensions: () => {\n        const anchorElement = this.anchor;\n\n        return anchorElement ? anchorElement.getBoundingClientRect() : null;\n      },\n      getBodyDimensions: () => {\n        return {\n          width: document.body.clientWidth,\n          height: document.body.clientHeight,\n        };\n      },\n      getWindowDimensions: () => {\n        return {\n          width: window.innerWidth,\n          height: window.innerHeight,\n        };\n      },\n      getWindowScroll: () => {\n        return {\n          x: window.pageXOffset,\n          y: window.pageYOffset,\n        };\n      },\n      setPosition: (position) => {\n        const mdcRoot = this.mdcRoot;\n\n        if (!mdcRoot) {\n          return;\n        }\n\n        this.styleLeft = 'left' in position ? `${position.left}px` : '';\n        this.styleRight = 'right' in position ? `${position.right}px` : '';\n        this.styleTop = 'top' in position ? `${position.top}px` : '';\n        this.styleBottom = 'bottom' in position ? `${position.bottom}px` : '';\n      },\n      setMaxHeight: async (height) => {\n        const mdcRoot = this.mdcRoot;\n\n        if (!mdcRoot) {\n          return;\n        }\n\n        // must set both for IE support as IE will not set a var\n        this.styleMaxHeight = height;\n        await this.updateComplete;\n        this.styleMaxHeight = `var(--md3-menu-max-height, ${height})`;\n      },\n    };\n  }\n\n  protected onKeydown(evt: KeyboardEvent) {\n    if (this.mdcFoundation) {\n      this.mdcFoundation.handleKeydown(evt);\n    }\n  }\n\n  protected onBodyClick(evt: MouseEvent) {\n    if (this.stayOpenOnBodyClick) {\n      return;\n    }\n    const path = evt.composedPath();\n    if (path.indexOf(this) === -1) {\n      this.close();\n    }\n  }\n\n  protected registerBodyClick() {\n    this.onBodyClickBound = this.onBodyClick.bind(this);\n    // capture otherwise listener closes menu after quick menu opens\n    document.body.addEventListener(\n        'click', this.onBodyClickBound, {passive: true, capture: true});\n  }\n\n  protected deregisterBodyClick() {\n    document.body.removeEventListener(\n        'click', this.onBodyClickBound, {capture: true});\n  }\n\n  close() {\n    this.open = false;\n  }\n\n  show() {\n    this.open = true;\n  }\n}\n"]}

package/navigationbar/_navigation-bar.scss

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

package/navigationbar/harness.d.ts

@@ -3,8 +3,8 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Harness } from '@material/web/testing/harness.js';
 import { NavigationTabHarness } from '../navigationtab/harness.js';
+import { Harness } from '../testing/harness.js';
 import { NavigationBar } from './lib/navigation-bar.js';
 /**
  * Test harness for navigation bars.

package/navigationbar/harness.js

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

package/navigationbar/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;AAEzD,OAAO,EAAC,oBAAoB,EAAC,MAAM,6BAA6B,CAAC;AAIjE;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,OAAsB;IAAhE;;QACW,QAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IAe/B,CAAC;IAbC;;OAEG;IACgB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAClD,CAAC;IAES,KAAK,CAAC,MAAM;QACpB,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QACxD,OAAO,IAAI,oBAAoB,CAAC,GAAG,CAAC,CAAC;IACvC,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 {NavigationTabHarness} from '../navigationtab/harness.js';\n\nimport {NavigationBar} from './lib/navigation-bar.js';\n\n/**\n * Test harness for navigation bars.\n */\nexport class NavigationBarHarness extends Harness<NavigationBar> {\n  readonly tab = this.getTab();\n\n  /**\n   * Returns the active tab to be used for interaction simulation.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return (await this.tab).getInteractiveElement();\n  }\n\n  protected async getTab() {\n    await this.element.updateComplete;\n    const tab = this.element.tabs[this.element.activeIndex];\n    return new NavigationTabHarness(tab);\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,oBAAoB,EAAC,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,OAAsB;IAAhE;;QACW,QAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IAe/B,CAAC;IAbC;;OAEG;IACgB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAClD,CAAC;IAES,KAAK,CAAC,MAAM;QACpB,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QACxD,OAAO,IAAI,oBAAoB,CAAC,GAAG,CAAC,CAAC;IACvC,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {NavigationTabHarness} from '../navigationtab/harness.js';\nimport {Harness} from '../testing/harness.js';\n\nimport {NavigationBar} from './lib/navigation-bar.js';\n\n/**\n * Test harness for navigation bars.\n */\nexport class NavigationBarHarness extends Harness<NavigationBar> {\n  readonly tab = this.getTab();\n\n  /**\n   * Returns the active tab to be used for interaction simulation.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return (await this.tab).getInteractiveElement();\n  }\n\n  protected async getTab() {\n    await this.element.updateComplete;\n    const tab = this.element.tabs[this.element.activeIndex];\n    return new NavigationTabHarness(tab);\n  }\n}\n"]}

package/navigationbar/lib/_navigation-bar.scss

@@ -6,23 +6,61 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@use '@material/web/elevation/lib/elevation-overlay';
+@use '../../elevation/lib/elevation';
+@use '../../sass/theme';
+@use '../../tokens';
 
-@mixin static-styles() {
-  @include elevation-overlay.static-styles();
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(
+    tokens.md-comp-navigation-bar-values(),
+    $tokens
+  );
+  $tokens: elevation.resolve-tokens($tokens, 'container-elevation');
+  $tokens: theme.create-theme-vars($tokens, 'navigation-bar');
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-navigation-bar-values();
+  $tokens: elevation.resolve-tokens($tokens, 'container-elevation');
+
+  $tokens: theme.create-theme-vars($tokens, 'navigation-bar');
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    width: 100%;
+  }
 
   .md3-navigation-bar {
     display: flex;
     position: relative;
     width: 100%;
+    background-color: var(--_container-color);
+    border-radius: var(--_container-shape);
+    height: var(--_container-height);
 
-    .md3-elevation-overlay {
-      z-index: 0;
-    }
+    @include elevation.theme(
+      (
+        duration: 280ms,
+        level: var(--_container-elevation),
+        shadow-color: var(--_container-shadow-color),
+        surface-tint-color: var(--_container-surface-tint-layer-color),
+      )
+    );
 
     .md3-navigation-bar__tabs-slot-container {
       display: inherit;
       width: inherit;
     }
   }
+
+  md-elevation {
+    inset: 0;
+    position: absolute;
+    z-index: 0;
+  }
 }

package/navigationbar/lib/constants.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';
 /**
  * MDCNavigationTabInteractionEventDetail provides details for the interaction
  * event.

package/navigationbar/lib/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["constants.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 * MDCNavigationTabInteractionEventDetail provides details for the interaction\n * event.\n */\nexport interface MDCNavigationTabInteractionEventDetail {\n  state: NavigationTabState;\n}\n\n/**\n * NavigationTabInteractionEvent is the custom event for the interaction event.\n */\nexport type NavigationTabInteractionEvent =\n    CustomEvent<MDCNavigationTabInteractionEventDetail>;\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["constants.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 * MDCNavigationTabInteractionEventDetail provides details for the interaction\n * event.\n */\nexport interface MDCNavigationTabInteractionEventDetail {\n  state: NavigationTabState;\n}\n\n/**\n * NavigationTabInteractionEvent is the custom event for the interaction event.\n */\nexport type NavigationTabInteractionEvent =\n    CustomEvent<MDCNavigationTabInteractionEventDetail>;\n"]}

package/navigationbar/lib/navigation-bar-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-bar{display:flex;position:relative;width:100%}.md3-navigation-bar .md3-elevation-overlay{z-index:0}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}:host{width:100%}.md3-navigation-bar{background-color:var(--md-navigation-bar-container-color, var(--md-sys-color-surface, #fffbfe));border-radius:var(--md-navigation-bar-container-shape, 0);height:var(--md-navigation-bar-container-height, 80px);--md-elevation-box-shadow-for-gss:0px 1px 2px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 2px 6px 2px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-navigation-bar-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-navigation-bar .md3-navigation-tab{font-family:var(--md-navigation-bar-label-text-font, Roboto);font-size:var(--md-navigation-bar-label-text-size, 12px);letter-spacing:var(--md-navigation-bar-label-text-tracking, 0.5px);font-weight:var(--md-navigation-bar-label-text-weight, 500);--md-ripple-hover-state-layer-color:var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-focus-state-layer-color:var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-pressed-state-layer-color:var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-hover-state-layer-opacity:var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-focus-ring-container-outer-padding-vertical:-4px;--md-focus-ring-container-outer-padding-horizontal:-4px;--md-badge-color:var(--md-navigation-bar-badge-color, var(--md-sys-color-error, #b3261e));--md-badge-size:var(--md-navigation-bar-badge-size, 6px);--md-badge-shape:var(--md-navigation-bar-badge-shape, 3px);--md-badge-large-color:var(--md-navigation-bar-large-badge-color, var(--md-sys-color-error, #b3261e));--md-badge-large-size:var(--md-navigation-bar-large-badge-size, 16px);--md-badge-large-shape:var(--md-navigation-bar-large-badge-shape, 8px)}.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__icon{width:var(--md-navigation-bar-icon-size, 24px);height:var(--md-navigation-bar-icon-size, 24px);font-size:var(--md-navigation-bar-icon-size, 24px)}.md3-navigation-bar .md3-navigation-tab:not(:disabled).md3-navigation-tab--active .md3-navigation-tab__icon{color:var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):hover.md3-navigation-tab--active .md3-navigation-tab__icon{color:var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):focus.md3-navigation-tab--active .md3-navigation-tab__icon{color:var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):active.md3-navigation-tab--active .md3-navigation-tab__icon{color:var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:disabled.md3-navigation-tab--active .md3-navigation-tab__icon{fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):not(.md3-navigation-tab--active) .md3-navigation-tab__icon{color:var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):hover:not(.md3-navigation-tab--active) .md3-navigation-tab__icon{color:var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):focus:not(.md3-navigation-tab--active) .md3-navigation-tab__icon{color:var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):active:not(.md3-navigation-tab--active) .md3-navigation-tab__icon{color:var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:disabled:not(.md3-navigation-tab--active) .md3-navigation-tab__icon{fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled).md3-navigation-tab--active .md3-navigation-tab__label-text{color:var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):hover.md3-navigation-tab--active .md3-navigation-tab__label-text{color:var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):focus.md3-navigation-tab--active .md3-navigation-tab__label-text{color:var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):active.md3-navigation-tab--active .md3-navigation-tab__label-text{color:var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{color:var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):hover:not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{color:var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):focus:not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{color:var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):active:not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{color:var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__active-indicator{background-color:var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8))}.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__active-indicator,.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__icon-content{height:var(--md-navigation-bar-active-indicator-height, 32px)}.md3-navigation-bar .md3-navigation-tab.md3-navigation-tab--active .md3-navigation-tab__active-indicator,.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__icon-content{width:var(--md-navigation-bar-active-indicator-width, 64px)}.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__active-indicator{border-radius:var(--md-navigation-bar-active-indicator-shape, 9999px)}.md3-navigation-bar .md3-navigation-tab.md3-navigation-tab--active{--md-ripple-hover-state-layer-color:var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-focus-state-layer-color:var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-pressed-state-layer-color:var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-hover-state-layer-opacity:var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-navigation-bar-pressed-state-layer-opacity, 0.12)}.md3-navigation-bar .md3-elevation-overlay{background-color:var(--md-navigation-bar-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4))}.md3-navigation-bar .md3-elevation-overlay{opacity:var(--md-navigation-bar-container-elevation-overlay-opacity, 0.08)}/*# sourceMappingURL=navigation-bar-styles.css.map */
+export const styles = css `:host{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, 32px);--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, 9999px);--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, 64px);--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_active-hover-icon-color: var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-hover-label-text-color: var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_active-icon-color: var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-label-text-color: var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, 700);--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-pressed-label-text-color: var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_badge-color: var(--md-navigation-bar-badge-color, var(--md-sys-color-error, #b3261e));--_badge-shape: var(--md-navigation-bar-badge-shape, 3px);--_badge-size: var(--md-navigation-bar-badge-size, 6px);--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface, #fffbfe));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shadow-color: var(--md-navigation-bar-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-navigation-bar-container-shape, 0px);--_container-surface-tint-layer-color: var(--md-navigation-bar-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-navigation-bar-icon-size, 24px);--_inactive-focus-icon-color: var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-icon-color: var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-label-text-color: var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-pressed-icon-color: var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_label-text-font: var(--md-navigation-bar-label-text-font, Roboto);--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, 1rem);--_label-text-size: var(--md-navigation-bar-label-text-size, 0.75rem);--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, 0.031rem);--_label-text-type: var(--md-navigation-bar-label-text-type, 500 0.75rem / 1rem Roboto);--_label-text-weight: var(--md-navigation-bar-label-text-weight, 500);--_large-badge-color: var(--md-navigation-bar-large-badge-color, var(--md-sys-color-error, #b3261e));--_large-badge-shape: var(--md-navigation-bar-large-badge-shape, 8px);--_large-badge-size: var(--md-navigation-bar-large-badge-size, 16px);--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);width:100%}.md3-navigation-bar{display:flex;position:relative;width:100%;background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height);--md-elevation-duration:280ms;--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-elevation-surface-tint-color:var(--_container-surface-tint-layer-color)}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{inset:0;position:absolute;z-index:0}/*# sourceMappingURL=navigation-bar-styles.css.map */
 `;
 //# sourceMappingURL=navigation-bar-styles.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-bar-styles.css.js","sourceRoot":"","sources":["navigation-bar-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-bar{display:flex;position:relative;width:100%}.md3-navigation-bar .md3-elevation-overlay{z-index:0}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}:host{width:100%}.md3-navigation-bar{background-color:var(--md-navigation-bar-container-color, var(--md-sys-color-surface, #fffbfe));border-radius:var(--md-navigation-bar-container-shape, 0);height:var(--md-navigation-bar-container-height, 80px);--md-elevation-box-shadow-for-gss:0px 1px 2px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 2px 6px 2px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-navigation-bar-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-navigation-bar .md3-navigation-tab{font-family:var(--md-navigation-bar-label-text-font, Roboto);font-size:var(--md-navigation-bar-label-text-size, 12px);letter-spacing:var(--md-navigation-bar-label-text-tracking, 0.5px);font-weight:var(--md-navigation-bar-label-text-weight, 500);--md-ripple-hover-state-layer-color:var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-focus-state-layer-color:var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-pressed-state-layer-color:var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-hover-state-layer-opacity:var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-focus-ring-container-outer-padding-vertical:-4px;--md-focus-ring-container-outer-padding-horizontal:-4px;--md-badge-color:var(--md-navigation-bar-badge-color, var(--md-sys-color-error, #b3261e));--md-badge-size:var(--md-navigation-bar-badge-size, 6px);--md-badge-shape:var(--md-navigation-bar-badge-shape, 3px);--md-badge-large-color:var(--md-navigation-bar-large-badge-color, var(--md-sys-color-error, #b3261e));--md-badge-large-size:var(--md-navigation-bar-large-badge-size, 16px);--md-badge-large-shape:var(--md-navigation-bar-large-badge-shape, 8px)}.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__icon{width:var(--md-navigation-bar-icon-size, 24px);height:var(--md-navigation-bar-icon-size, 24px);font-size:var(--md-navigation-bar-icon-size, 24px)}.md3-navigation-bar .md3-navigation-tab:not(:disabled).md3-navigation-tab--active .md3-navigation-tab__icon{color:var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):hover.md3-navigation-tab--active .md3-navigation-tab__icon{color:var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):focus.md3-navigation-tab--active .md3-navigation-tab__icon{color:var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):active.md3-navigation-tab--active .md3-navigation-tab__icon{color:var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:disabled.md3-navigation-tab--active .md3-navigation-tab__icon{fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):not(.md3-navigation-tab--active) .md3-navigation-tab__icon{color:var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):hover:not(.md3-navigation-tab--active) .md3-navigation-tab__icon{color:var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):focus:not(.md3-navigation-tab--active) .md3-navigation-tab__icon{color:var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled):active:not(.md3-navigation-tab--active) .md3-navigation-tab__icon{color:var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f));fill:currentColor}.md3-navigation-bar .md3-navigation-tab:disabled:not(.md3-navigation-tab--active) .md3-navigation-tab__icon{fill:currentColor}.md3-navigation-bar .md3-navigation-tab:not(:disabled).md3-navigation-tab--active .md3-navigation-tab__label-text{color:var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):hover.md3-navigation-tab--active .md3-navigation-tab__label-text{color:var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):focus.md3-navigation-tab--active .md3-navigation-tab__label-text{color:var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):active.md3-navigation-tab--active .md3-navigation-tab__label-text{color:var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{color:var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):hover:not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{color:var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):focus:not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{color:var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab:not(:disabled):active:not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{color:var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__active-indicator{background-color:var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8))}.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__active-indicator,.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__icon-content{height:var(--md-navigation-bar-active-indicator-height, 32px)}.md3-navigation-bar .md3-navigation-tab.md3-navigation-tab--active .md3-navigation-tab__active-indicator,.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__icon-content{width:var(--md-navigation-bar-active-indicator-width, 64px)}.md3-navigation-bar .md3-navigation-tab .md3-navigation-tab__active-indicator{border-radius:var(--md-navigation-bar-active-indicator-shape, 9999px)}.md3-navigation-bar .md3-navigation-tab.md3-navigation-tab--active{--md-ripple-hover-state-layer-color:var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-focus-state-layer-color:var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-pressed-state-layer-color:var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-hover-state-layer-opacity:var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-navigation-bar-pressed-state-layer-opacity, 0.12)}.md3-navigation-bar .md3-elevation-overlay{background-color:var(--md-navigation-bar-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4))}.md3-navigation-bar .md3-elevation-overlay{opacity:var(--md-navigation-bar-container-elevation-overlay-opacity, 0.08)}/*# sourceMappingURL=navigation-bar-styles.css.map */\n`;\n "]}
+{"version":3,"file":"navigation-bar-styles.css.js","sourceRoot":"","sources":["navigation-bar-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{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, 32px);--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, 9999px);--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, 64px);--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_active-hover-icon-color: var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-hover-label-text-color: var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_active-icon-color: var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-label-text-color: var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, 700);--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-pressed-label-text-color: var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_badge-color: var(--md-navigation-bar-badge-color, var(--md-sys-color-error, #b3261e));--_badge-shape: var(--md-navigation-bar-badge-shape, 3px);--_badge-size: var(--md-navigation-bar-badge-size, 6px);--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface, #fffbfe));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shadow-color: var(--md-navigation-bar-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-navigation-bar-container-shape, 0px);--_container-surface-tint-layer-color: var(--md-navigation-bar-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-navigation-bar-icon-size, 24px);--_inactive-focus-icon-color: var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-icon-color: var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-label-text-color: var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-pressed-icon-color: var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_label-text-font: var(--md-navigation-bar-label-text-font, Roboto);--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, 1rem);--_label-text-size: var(--md-navigation-bar-label-text-size, 0.75rem);--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, 0.031rem);--_label-text-type: var(--md-navigation-bar-label-text-type, 500 0.75rem / 1rem Roboto);--_label-text-weight: var(--md-navigation-bar-label-text-weight, 500);--_large-badge-color: var(--md-navigation-bar-large-badge-color, var(--md-sys-color-error, #b3261e));--_large-badge-shape: var(--md-navigation-bar-large-badge-shape, 8px);--_large-badge-size: var(--md-navigation-bar-large-badge-size, 16px);--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);width:100%}.md3-navigation-bar{display:flex;position:relative;width:100%;background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height);--md-elevation-duration:280ms;--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-elevation-surface-tint-color:var(--_container-surface-tint-layer-color)}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{inset:0;position:absolute;z-index:0}/*# sourceMappingURL=navigation-bar-styles.css.map */\n`;\n "]}