@material/web 1.0.0-pre.6 → 1.0.0-pre.7

package/menu/lib/shared.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared.js","sourceRoot":"","sources":["shared.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ListItem} from '../../list/lib/listitem/list-item.js';\n\n/**\n * Interface specific to menu item and not list item.\n */\ninterface MenuItemSelf {\n  /**\n   * The visible headline text of the item.\n   */\n  headline: string;\n  /**\n   * Whether or not the item is in the selected visual state (focuses on\n   * selection).\n   */\n  active: boolean;\n  /**\n   * If it is a sub-menu-item, a method that can close the submenu.\n   */\n  close?: () => void;\n  /**\n   * Focuses the item.\n   */\n  focus: () => void;\n}\n\n/**\n * The interface of every menu item interactive with a menu. All menu items\n * should implement this interface to be compatible with md-menu. Additionally\n * they should have both the `md-menu-item` and `md-list-item` attributes set.\n */\nexport type MenuItem = MenuItemSelf&ListItem;\n\n/**\n * The reason the `close-menu` event was dispatched.\n */\nexport interface Reason {\n  kind: string;\n}\n\n/**\n * The click selection reason for the `close-menu` event. The menu was closed\n * because an item was selected via user click.\n */\nexport interface ClickReason extends Reason {\n  kind: typeof CLOSE_REASON.CLICK_SELECTION;\n}\n\n/**\n * The keydown reason for the `close-menu` event. The menu was closed\n * because a specific key was pressed. The default closing keys for\n * `md-menu-item` are, Space, Enter or Escape.\n */\nexport interface KeydownReason extends Reason {\n  kind: typeof CLOSE_REASON.KEYDOWN;\n  key: string;\n}\n\n/**\n * The default menu closing reasons for the material md-menu package.\n */\nexport type DefaultReasons = ClickReason|KeydownReason;\n\n/**\n * The event that closes any parent menus. It is recommended to subclass and\n * dispatch this event rather than creating your own `close-menu` event.\n */\nexport class CloseMenuEvent<T extends Reason = DefaultReasons> extends Event {\n  readonly itemPath: MenuItem[];\n  constructor(public initiator: MenuItem, readonly reason: T) {\n    super('close-menu', {bubbles: true, composed: true});\n    this.itemPath = [initiator];\n  }\n}\n\n/**\n * The default close menu event used by md-menu. To create your own `close-menu`\n * event, you should subclass the `CloseMenuEvent` instead.\n */\n// tslint:disable-next-line\nexport const DefaultCloseMenuEvent = CloseMenuEvent<DefaultReasons>;\n\n/**\n * The event that requests the parent md-menu to deactivate all other items.\n */\nexport class DeactivateItemsEvent extends Event {\n  constructor() {\n    super('deactivate-items', {bubbles: true, composed: true});\n  }\n}\n\n/**\n * Requests the typeahead functionality of containing menu be deactivated.\n */\nexport class DeactivateTypeaheadEvent extends Event {\n  constructor() {\n    super('deactivate-typeahead', {bubbles: true, composed: true});\n  }\n}\n\n/**\n * Requests the typeahead functionality of containing menu be activated.\n */\nexport class ActivateTypeaheadEvent extends Event {\n  constructor() {\n    super('activate-typeahead', {bubbles: true, composed: true});\n  }\n}\n\n/**\n * Keys that are used to navigate menus.\n */\nexport const NAVIGABLE_KEY = {\n  UP: 'ArrowUp',\n  DOWN: 'ArrowDown',\n  RIGHT: 'ArrowRight',\n  LEFT: 'ArrowLeft',\n} as const;\n\n/**\n * Keys that are used for selection in menus.\n */\nexport const SELECTION_KEY = {\n  SPACE: 'Space',\n  ENTER: 'Enter',\n} as const;\n\n/**\n * Default close `Reason` kind values.\n */\nexport const CLOSE_REASON = {\n  CLICK_SELECTION: 'CLICK_SELECTION',\n  KEYDOWN: 'KEYDOWN',\n} as const;\n\n/**\n * Keys that can close menus.\n */\nexport const KEYDOWN_CLOSE_KEYS = {\n  ESCAPE: 'Escape',\n  SPACE: SELECTION_KEY.SPACE,\n  ENTER: SELECTION_KEY.ENTER,\n} as const;\n\ntype Values<T> = T[keyof T];\n\n/**\n * Determines whether the given key code is a key code that should close the\n * menu.\n *\n * @param code The KeyboardEvent code to check.\n * @return Whether or not the key code is in the predetermined list to close the\n * menu.\n */\nexport function isClosableKey(code: string):\n    code is Values<typeof KEYDOWN_CLOSE_KEYS> {\n  return Object.values(KEYDOWN_CLOSE_KEYS).some(value => (value === code));\n}\n\n/**\n * Determines whether the given key code is a key code that should select a menu\n * item.\n *\n * @param code They KeyboardEvent code to check.\n * @return Whether or not the key code is in the predetermined list to select a\n * menu item.\n */\nexport function isSelectableKey(code: string):\n    code is Values<typeof SELECTION_KEY> {\n  return Object.values(SELECTION_KEY).some(value => (value === code));\n}\n\n/**\n * Determines whether a target element is contained inside another element's\n * composed tree.\n *\n * @param target The potential contained element.\n * @param container The potential containing element of the target.\n * @returns Whether the target element is contained inside the container's\n * composed subtree\n */\nexport function isElementInSubtree(\n    target: EventTarget, container: EventTarget) {\n  // Dispatch a composed, bubbling event to check its path to see if the\n  // newly-focused element is contained in container's subtree\n  const focusEv = new Event('md-contains', {bubbles: true, composed: true});\n  let composedPath: EventTarget[] = [];\n  const listener = (ev: Event) => {\n    composedPath = ev.composedPath();\n  };\n\n  container.addEventListener('md-contains', listener);\n  target.dispatchEvent(focusEv);\n  container.removeEventListener('md-contains', listener);\n\n  const isContained = composedPath.length > 0;\n  return isContained;\n}\n"]}
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["shared.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ListItem} from '../../list/lib/listitem/list-item.js';\n\n/**\n * Interface specific to menu item and not list item.\n */\ninterface MenuItemSelf {\n  /**\n   * The visible headline text of the item.\n   */\n  headline: string;\n  /**\n   * Whether or not the item is the currently active item of interest (focuses\n   * upon activation).\n   */\n  active: boolean;\n  /**\n   * Whether or not the item is in the selected visual state.\n   */\n  selected?: boolean;\n  /**\n   * If it is a sub-menu-item, a method that can close the submenu.\n   */\n  close?: () => void;\n  /**\n   * Focuses the item.\n   */\n  focus: () => void;\n}\n\n/**\n * The interface of every menu item interactive with a menu. All menu items\n * should implement this interface to be compatible with md-menu. Additionally\n * they should have both the `md-menu-item` and `md-list-item` attributes set.\n */\nexport type MenuItem = MenuItemSelf&ListItem;\n\n/**\n * The reason the `close-menu` event was dispatched.\n */\nexport interface Reason {\n  kind: string;\n}\n\n/**\n * The click selection reason for the `close-menu` event. The menu was closed\n * because an item was selected via user click.\n */\nexport interface ClickReason extends Reason {\n  kind: typeof CLOSE_REASON.CLICK_SELECTION;\n}\n\n/**\n * The keydown reason for the `close-menu` event. The menu was closed\n * because a specific key was pressed. The default closing keys for\n * `md-menu-item` are, Space, Enter or Escape.\n */\nexport interface KeydownReason extends Reason {\n  kind: typeof CLOSE_REASON.KEYDOWN;\n  key: string;\n}\n\n/**\n * The default menu closing reasons for the material md-menu package.\n */\nexport type DefaultReasons = ClickReason|KeydownReason;\n\n/**\n * The event that closes any parent menus. It is recommended to subclass and\n * dispatch this event rather than creating your own `close-menu` event.\n */\nexport class CloseMenuEvent<T extends Reason = DefaultReasons> extends Event {\n  readonly itemPath: MenuItem[];\n  constructor(public initiator: MenuItem, readonly reason: T) {\n    super('close-menu', {bubbles: true, composed: true});\n    this.itemPath = [initiator];\n  }\n}\n\n/**\n * The default close menu event used by md-menu. To create your own `close-menu`\n * event, you should subclass the `CloseMenuEvent` instead.\n */\n// tslint:disable-next-line\nexport const DefaultCloseMenuEvent = CloseMenuEvent<DefaultReasons>;\n\n/**\n * The event that requests the parent md-menu to deactivate all other items.\n */\nexport class DeactivateItemsEvent extends Event {\n  constructor() {\n    super('deactivate-items', {bubbles: true, composed: true});\n  }\n}\n\n/**\n * Requests the typeahead functionality of containing menu be deactivated.\n */\nexport class DeactivateTypeaheadEvent extends Event {\n  constructor() {\n    super('deactivate-typeahead', {bubbles: true, composed: true});\n  }\n}\n\n/**\n * Requests the typeahead functionality of containing menu be activated.\n */\nexport class ActivateTypeaheadEvent extends Event {\n  constructor() {\n    super('activate-typeahead', {bubbles: true, composed: true});\n  }\n}\n\n/**\n * Keys that are used to navigate menus.\n */\nexport const NAVIGABLE_KEY = {\n  UP: 'ArrowUp',\n  DOWN: 'ArrowDown',\n  RIGHT: 'ArrowRight',\n  LEFT: 'ArrowLeft',\n} as const;\n\n/**\n * Keys that are used for selection in menus.\n */\nexport const SELECTION_KEY = {\n  SPACE: 'Space',\n  ENTER: 'Enter',\n} as const;\n\n/**\n * Default close `Reason` kind values.\n */\nexport const CLOSE_REASON = {\n  CLICK_SELECTION: 'CLICK_SELECTION',\n  KEYDOWN: 'KEYDOWN',\n} as const;\n\n/**\n * Keys that can close menus.\n */\nexport const KEYDOWN_CLOSE_KEYS = {\n  ESCAPE: 'Escape',\n  SPACE: SELECTION_KEY.SPACE,\n  ENTER: SELECTION_KEY.ENTER,\n} as const;\n\ntype Values<T> = T[keyof T];\n\n/**\n * Determines whether the given key code is a key code that should close the\n * menu.\n *\n * @param code The KeyboardEvent code to check.\n * @return Whether or not the key code is in the predetermined list to close the\n * menu.\n */\nexport function isClosableKey(code: string):\n    code is Values<typeof KEYDOWN_CLOSE_KEYS> {\n  return Object.values(KEYDOWN_CLOSE_KEYS).some(value => (value === code));\n}\n\n/**\n * Determines whether the given key code is a key code that should select a menu\n * item.\n *\n * @param code They KeyboardEvent code to check.\n * @return Whether or not the key code is in the predetermined list to select a\n * menu item.\n */\nexport function isSelectableKey(code: string):\n    code is Values<typeof SELECTION_KEY> {\n  return Object.values(SELECTION_KEY).some(value => (value === code));\n}\n\n/**\n * Determines whether a target element is contained inside another element's\n * composed tree.\n *\n * @param target The potential contained element.\n * @param container The potential containing element of the target.\n * @returns Whether the target element is contained inside the container's\n * composed subtree\n */\nexport function isElementInSubtree(\n    target: EventTarget, container: EventTarget) {\n  // Dispatch a composed, bubbling event to check its path to see if the\n  // newly-focused element is contained in container's subtree\n  const focusEv = new Event('md-contains', {bubbles: true, composed: true});\n  let composedPath: EventTarget[] = [];\n  const listener = (ev: Event) => {\n    composedPath = ev.composedPath();\n  };\n\n  container.addEventListener('md-contains', listener);\n  target.dispatchEvent(focusEv);\n  container.removeEventListener('md-contains', listener);\n\n  const isContained = composedPath.length > 0;\n  return isContained;\n}\n"]}

package/menu/lib/submenuitem/sub-menu-item.d.ts

@@ -3,7 +3,6 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { ARIARole } from '../../../types/aria.js';
 import { Corner, Menu } from '../menu.js';
 import { MenuItemEl } from '../menuitem/menu-item.js';
 import { CloseMenuEvent } from '../shared.js';
@@ -16,7 +15,6 @@ import { CloseMenuEvent } from '../shared.js';
  *     activate the typeahead functionality when a submenu closes
  */
 export declare class SubMenuItem extends MenuItemEl {
-    role: ARIARole;
     /**
      * The anchorCorner to set on the submenu.
      */

package/menu/lib/submenuitem/sub-menu-item.js

@@ -3,7 +3,7 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
+import { __decorate } from "tslib";
 import { html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { List } from '../../../list/lib/list.js';
@@ -23,7 +23,6 @@ function stopPropagation(e) {
 export class SubMenuItem extends MenuItemEl {
     constructor() {
         super(...arguments);
-        this.role = 'menuitem';
         /**
          * The anchorCorner to set on the submenu.
          */
@@ -192,7 +191,6 @@ export class SubMenuItem extends MenuItemEl {
         // around the menu and then mouses over an md-sub-menu.
         this.dispatchEvent(new DeactivateItemsEvent());
         this.dispatchEvent(new DeactivateTypeaheadEvent());
-        this.active = true;
         this.selected = true;
         // This is the case of mouse hovering when already opened via keyboard or
         // vice versa
@@ -258,27 +256,21 @@ export class SubMenuItem extends MenuItemEl {
     }
 }
 __decorate([
-    property({ attribute: 'anchor-corner' }),
-    __metadata("design:type", String)
+    property({ attribute: 'anchor-corner' })
 ], SubMenuItem.prototype, "anchorCorner", void 0);
 __decorate([
-    property({ attribute: 'menu-corner' }),
-    __metadata("design:type", String)
+    property({ attribute: 'menu-corner' })
 ], SubMenuItem.prototype, "menuCorner", void 0);
 __decorate([
-    property({ type: Number, attribute: 'hover-open-delay' }),
-    __metadata("design:type", Object)
+    property({ type: Number, attribute: 'hover-open-delay' })
 ], SubMenuItem.prototype, "hoverOpenDelay", void 0);
 __decorate([
-    property({ type: Number, attribute: 'hover-close-delay' }),
-    __metadata("design:type", Object)
+    property({ type: Number, attribute: 'hover-close-delay' })
 ], SubMenuItem.prototype, "hoverCloseDelay", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
+    property({ type: Boolean, reflect: true })
 ], SubMenuItem.prototype, "selected", void 0);
 __decorate([
-    queryAssignedElements({ slot: 'submenu', flatten: true }),
-    __metadata("design:type", Array)
+    queryAssignedElements({ slot: 'submenu', flatten: true })
 ], SubMenuItem.prototype, "menus", void 0);
 //# sourceMappingURL=sub-menu-item.js.map

package/menu/lib/submenuitem/sub-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sub-menu-item.js","sourceRoot":"","sources":["sub-menu-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\n\nimport {List} from '../../../list/lib/list.js';\nimport {ARIARole} from '../../../types/aria.js';\nimport {Corner, Menu} from '../menu.js';\nimport {MenuItemEl} from '../menuitem/menu-item.js';\nimport {ActivateTypeaheadEvent, CLOSE_REASON, CloseMenuEvent, DeactivateItemsEvent, DeactivateTypeaheadEvent, KEYDOWN_CLOSE_KEYS, NAVIGABLE_KEY, SELECTION_KEY} from '../shared.js';\n\nfunction stopPropagation(e: Event) {\n  e.stopPropagation();\n}\n\n/**\n * @fires deactivate-items {DeactivateItemsEvent} Requests the parent menu to\n *     deselect other items when a submenu opens\n * @fires deactivate-typeahead {DeactivateItemsEvent} Requests the parent menu\n *     to deactivate the typeahead functionality when a submenu opens\n * @fires activate-typeahead {DeactivateItemsEvent} Requests the parent menu to\n *     activate the typeahead functionality when a submenu closes\n */\nexport class SubMenuItem extends MenuItemEl {\n  override role: ARIARole = 'menuitem';\n  /**\n   * The anchorCorner to set on the submenu.\n   */\n  @property({attribute: 'anchor-corner'}) anchorCorner: Corner = 'START_END';\n  /**\n   * The menuCorner to set on the submenu.\n   */\n  @property({attribute: 'menu-corner'}) menuCorner: Corner = 'START_START';\n  /**\n   * The delay between pointerenter and submenu opening.\n   */\n  @property({type: Number, attribute: 'hover-open-delay'}) hoverOpenDelay = 400;\n  /**\n   * The delay between ponterleave and the submenu closing.\n   */\n  @property({type: Number, attribute: 'hover-close-delay'})\n  hoverCloseDelay = 400;\n  /**\n   * Sets the item in the selected visual state when a submenu is opened.\n   */\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  @queryAssignedElements({slot: 'submenu', flatten: true})\n  protected menus!: Menu[];\n\n  protected override keepOpenOnClick = true;\n  protected previousOpenTimeout = 0;\n  protected previousCloseTimeout = 0;\n\n  protected get submenuEl(): Menu|undefined {\n    return this.menus[0];\n  }\n\n  /**\n   * Starts the default 400ms countdown to open the submenu.\n   */\n  protected override onPointerenter = () => {\n    clearTimeout(this.previousOpenTimeout);\n    clearTimeout(this.previousCloseTimeout);\n    if (this.submenuEl?.open) return;\n\n    // Open synchronously if delay is 0. (screenshot tests infra\n    // would never resolve otherwise)\n    if (!this.hoverOpenDelay) {\n      this.show();\n    } else {\n      this.previousOpenTimeout = setTimeout(() => {\n        this.show();\n      }, this.hoverOpenDelay);\n    }\n  };\n\n  /**\n   * Starts the default 400ms countdown to close the submenu.\n   */\n  protected override onPointerleave = () => {\n    clearTimeout(this.previousCloseTimeout);\n    clearTimeout(this.previousOpenTimeout);\n\n    // Close synchronously if delay is 0. (screenshot tests infra\n    // would never resolve otherwise)\n    if (!this.hoverCloseDelay) {\n      this.close();\n    } else {\n      this.previousCloseTimeout = setTimeout(() => {\n        this.close();\n      }, this.hoverCloseDelay);\n    }\n  };\n\n  protected override onClick() {\n    this.show();\n  }\n\n  /**\n   * On item keydown handles opening the submenu.\n   */\n  protected override onKeydown(e: KeyboardEvent) {\n    const shouldOpenSubmenu = this.isSubmenuOpenKey(e.code);\n\n    if (e.code === SELECTION_KEY.SPACE) {\n      // prevent space from scrolling. Only open the submenu.\n      e.preventDefault();\n    }\n\n    if (!shouldOpenSubmenu) {\n      super.onKeydown(e);\n      return;\n    }\n\n    const submenu = this.submenuEl;\n    if (!submenu) return;\n\n    const submenuItems = submenu.items;\n    const firstActivatableItem = List.getFirstActivatableItem(submenuItems);\n\n    if (firstActivatableItem) {\n      this.show(() => {\n        firstActivatableItem.active = true;\n      });\n\n      return;\n    }\n  }\n\n  /**\n   * Render the submenu at the end\n   */\n  protected override renderEnd() {\n    return html`${super.renderEnd()}${this.renderSubMenu()}`;\n  }\n\n  /**\n   * Renders the slot for the submenu.\n   */\n  protected renderSubMenu() {\n    return html`<span class=\"submenu\"><slot\n        name=\"submenu\"\n        @pointerdown=${stopPropagation}\n        @click=${stopPropagation}\n        @keydown=${this.onSubMenuKeydown}\n        @close-menu=${this.onCloseSubmenu}\n    ></slot></span>`;\n  }\n\n  protected onCloseSubmenu(e: CloseMenuEvent) {\n    e.itemPath.push(this);\n    this.dispatchEvent(new ActivateTypeaheadEvent());\n    // Escape should only close one menu not all of the menus unlike space or\n    // click selection which should close all menus.\n    if (e.reason.kind === CLOSE_REASON.KEYDOWN &&\n        e.reason.key === KEYDOWN_CLOSE_KEYS.ESCAPE) {\n      e.stopPropagation();\n      this.active = true;\n      this.selected = false;\n      // It might already be active so manually focus\n      this.listItemRoot.focus();\n      return;\n    }\n\n    this.active = false;\n    this.selected = false;\n  }\n\n  protected async onSubMenuKeydown(e: KeyboardEvent) {\n    // Stop propagation so that we don't accidentally close every parent menu.\n    // Additionally, we want to isolate things like the typeahead keydowns\n    // from bubbling up to the parent menu and confounding things.\n    e.stopPropagation();\n    const shouldClose = this.isSubmenuCloseKey(e.code);\n\n    if (!shouldClose) return;\n\n    this.close(() => {\n      List.deactivateActiveItem(this.submenuEl!.items);\n      this.listItemRoot.focus();\n      this.active = true;\n    });\n  }\n\n  /**\n   * Shows the submenu.\n   *\n   * @param onOpened A function to call after the menu is opened.\n   */\n  show(onOpened = () => {}) {\n    const menu = this.submenuEl;\n    if (!menu) return;\n\n    menu.quick = true;\n    // Submenus are in overflow when not fixed. Can remove once we have native\n    // popup support\n    menu.hasOverflow = true;\n    menu.anchorCorner = this.anchorCorner;\n    menu.menuCorner = this.menuCorner;\n    menu.anchor = this;\n    // We manually set focus with `active` on keyboard navigation. And we\n    // want to focus the root on hover, so the user can pick up navigation with\n    // keyboard after hover.\n    menu.defaultFocus = 'LIST_ROOT';\n    menu.skipRestoreFocus = true;\n\n    // Menu could already be opened because of mouse interaction\n    const menuAlreadyOpen = menu.open;\n    menu.show();\n\n    // Deactivate other items. This can be the case if the user has tabbed\n    // around the menu and then mouses over an md-sub-menu.\n    this.dispatchEvent(new DeactivateItemsEvent());\n    this.dispatchEvent(new DeactivateTypeaheadEvent());\n    this.active = true;\n    this.selected = true;\n\n    // This is the case of mouse hovering when already opened via keyboard or\n    // vice versa\n    if (menuAlreadyOpen) {\n      onOpened();\n    } else {\n      menu.addEventListener('opened', onOpened, {once: true});\n    }\n  }\n\n  /**\n   * Closes the submenu.\n   *\n   * @param onClosed A function to call after the menu is closed.\n   */\n  close(onClosed = () => {}) {\n    const menu = this.submenuEl;\n    if (!menu || !menu.open) return;\n\n    this.dispatchEvent(new ActivateTypeaheadEvent());\n    menu.quick = true;\n    menu.close();\n    this.active = false;\n    this.selected = false;\n    menu.addEventListener('closed', onClosed, {once: true});\n  }\n\n  /**\n   * Determines whether the given KeyboardEvent code is one that should open\n   * the submenu. This is RTL-aware. By default, left, right, space, or enter.\n   *\n   * @param code The native KeyboardEvent code.\n   * @return Whether or not the key code should open the submenu.\n   */\n  protected isSubmenuOpenKey(code: string) {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnterKey = isRtl ? NAVIGABLE_KEY.LEFT : NAVIGABLE_KEY.RIGHT;\n    switch (code) {\n      case arrowEnterKey:\n      case SELECTION_KEY.SPACE:\n      case SELECTION_KEY.ENTER:\n        return true;\n      default:\n        return false;\n    }\n  }\n\n  /**\n   * Determines whether the given KeyboardEvent code is one that should close\n   * the submenu. This is RTL-aware. By default right, left, or escape.\n   *\n   * @param code The native KeyboardEvent code.\n   * @return Whether or not the key code should close the submenu.\n   */\n  protected isSubmenuCloseKey(code: string) {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnterKey = isRtl ? NAVIGABLE_KEY.RIGHT : NAVIGABLE_KEY.LEFT;\n    switch (code) {\n      case arrowEnterKey:\n      case KEYDOWN_CLOSE_KEYS.ESCAPE:\n        return true;\n      default:\n        return false;\n    }\n  }\n}\n"]}
+{"version":3,"file":"sub-menu-item.js","sourceRoot":"","sources":["sub-menu-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\n\nimport {List} from '../../../list/lib/list.js';\nimport {Corner, Menu} from '../menu.js';\nimport {MenuItemEl} from '../menuitem/menu-item.js';\nimport {ActivateTypeaheadEvent, CLOSE_REASON, CloseMenuEvent, DeactivateItemsEvent, DeactivateTypeaheadEvent, KEYDOWN_CLOSE_KEYS, NAVIGABLE_KEY, SELECTION_KEY} from '../shared.js';\n\nfunction stopPropagation(e: Event) {\n  e.stopPropagation();\n}\n\n/**\n * @fires deactivate-items {DeactivateItemsEvent} Requests the parent menu to\n *     deselect other items when a submenu opens\n * @fires deactivate-typeahead {DeactivateItemsEvent} Requests the parent menu\n *     to deactivate the typeahead functionality when a submenu opens\n * @fires activate-typeahead {DeactivateItemsEvent} Requests the parent menu to\n *     activate the typeahead functionality when a submenu closes\n */\nexport class SubMenuItem extends MenuItemEl {\n  /**\n   * The anchorCorner to set on the submenu.\n   */\n  @property({attribute: 'anchor-corner'}) anchorCorner: Corner = 'START_END';\n  /**\n   * The menuCorner to set on the submenu.\n   */\n  @property({attribute: 'menu-corner'}) menuCorner: Corner = 'START_START';\n  /**\n   * The delay between pointerenter and submenu opening.\n   */\n  @property({type: Number, attribute: 'hover-open-delay'}) hoverOpenDelay = 400;\n  /**\n   * The delay between ponterleave and the submenu closing.\n   */\n  @property({type: Number, attribute: 'hover-close-delay'})\n  hoverCloseDelay = 400;\n  /**\n   * Sets the item in the selected visual state when a submenu is opened.\n   */\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  @queryAssignedElements({slot: 'submenu', flatten: true})\n  protected menus!: Menu[];\n\n  protected override keepOpenOnClick = true;\n  protected previousOpenTimeout = 0;\n  protected previousCloseTimeout = 0;\n\n  protected get submenuEl(): Menu|undefined {\n    return this.menus[0];\n  }\n\n  /**\n   * Starts the default 400ms countdown to open the submenu.\n   */\n  protected override onPointerenter = () => {\n    clearTimeout(this.previousOpenTimeout);\n    clearTimeout(this.previousCloseTimeout);\n    if (this.submenuEl?.open) return;\n\n    // Open synchronously if delay is 0. (screenshot tests infra\n    // would never resolve otherwise)\n    if (!this.hoverOpenDelay) {\n      this.show();\n    } else {\n      this.previousOpenTimeout = setTimeout(() => {\n        this.show();\n      }, this.hoverOpenDelay);\n    }\n  };\n\n  /**\n   * Starts the default 400ms countdown to close the submenu.\n   */\n  protected override onPointerleave = () => {\n    clearTimeout(this.previousCloseTimeout);\n    clearTimeout(this.previousOpenTimeout);\n\n    // Close synchronously if delay is 0. (screenshot tests infra\n    // would never resolve otherwise)\n    if (!this.hoverCloseDelay) {\n      this.close();\n    } else {\n      this.previousCloseTimeout = setTimeout(() => {\n        this.close();\n      }, this.hoverCloseDelay);\n    }\n  };\n\n  protected override onClick() {\n    this.show();\n  }\n\n  /**\n   * On item keydown handles opening the submenu.\n   */\n  protected override onKeydown(e: KeyboardEvent) {\n    const shouldOpenSubmenu = this.isSubmenuOpenKey(e.code);\n\n    if (e.code === SELECTION_KEY.SPACE) {\n      // prevent space from scrolling. Only open the submenu.\n      e.preventDefault();\n    }\n\n    if (!shouldOpenSubmenu) {\n      super.onKeydown(e);\n      return;\n    }\n\n    const submenu = this.submenuEl;\n    if (!submenu) return;\n\n    const submenuItems = submenu.items;\n    const firstActivatableItem = List.getFirstActivatableItem(submenuItems);\n\n    if (firstActivatableItem) {\n      this.show(() => {\n        firstActivatableItem.active = true;\n      });\n\n      return;\n    }\n  }\n\n  /**\n   * Render the submenu at the end\n   */\n  protected override renderEnd() {\n    return html`${super.renderEnd()}${this.renderSubMenu()}`;\n  }\n\n  /**\n   * Renders the slot for the submenu.\n   */\n  protected renderSubMenu() {\n    return html`<span class=\"submenu\"><slot\n        name=\"submenu\"\n        @pointerdown=${stopPropagation}\n        @click=${stopPropagation}\n        @keydown=${this.onSubMenuKeydown}\n        @close-menu=${this.onCloseSubmenu}\n    ></slot></span>`;\n  }\n\n  protected onCloseSubmenu(e: CloseMenuEvent) {\n    e.itemPath.push(this);\n    this.dispatchEvent(new ActivateTypeaheadEvent());\n    // Escape should only close one menu not all of the menus unlike space or\n    // click selection which should close all menus.\n    if (e.reason.kind === CLOSE_REASON.KEYDOWN &&\n        e.reason.key === KEYDOWN_CLOSE_KEYS.ESCAPE) {\n      e.stopPropagation();\n      this.active = true;\n      this.selected = false;\n      // It might already be active so manually focus\n      this.listItemRoot.focus();\n      return;\n    }\n\n    this.active = false;\n    this.selected = false;\n  }\n\n  protected async onSubMenuKeydown(e: KeyboardEvent) {\n    // Stop propagation so that we don't accidentally close every parent menu.\n    // Additionally, we want to isolate things like the typeahead keydowns\n    // from bubbling up to the parent menu and confounding things.\n    e.stopPropagation();\n    const shouldClose = this.isSubmenuCloseKey(e.code);\n\n    if (!shouldClose) return;\n\n    this.close(() => {\n      List.deactivateActiveItem(this.submenuEl!.items);\n      this.listItemRoot.focus();\n      this.active = true;\n    });\n  }\n\n  /**\n   * Shows the submenu.\n   *\n   * @param onOpened A function to call after the menu is opened.\n   */\n  show(onOpened = () => {}) {\n    const menu = this.submenuEl;\n    if (!menu) return;\n\n    menu.quick = true;\n    // Submenus are in overflow when not fixed. Can remove once we have native\n    // popup support\n    menu.hasOverflow = true;\n    menu.anchorCorner = this.anchorCorner;\n    menu.menuCorner = this.menuCorner;\n    menu.anchor = this;\n    // We manually set focus with `active` on keyboard navigation. And we\n    // want to focus the root on hover, so the user can pick up navigation with\n    // keyboard after hover.\n    menu.defaultFocus = 'LIST_ROOT';\n    menu.skipRestoreFocus = true;\n\n    // Menu could already be opened because of mouse interaction\n    const menuAlreadyOpen = menu.open;\n    menu.show();\n\n    // Deactivate other items. This can be the case if the user has tabbed\n    // around the menu and then mouses over an md-sub-menu.\n    this.dispatchEvent(new DeactivateItemsEvent());\n    this.dispatchEvent(new DeactivateTypeaheadEvent());\n    this.selected = true;\n\n    // This is the case of mouse hovering when already opened via keyboard or\n    // vice versa\n    if (menuAlreadyOpen) {\n      onOpened();\n    } else {\n      menu.addEventListener('opened', onOpened, {once: true});\n    }\n  }\n\n  /**\n   * Closes the submenu.\n   *\n   * @param onClosed A function to call after the menu is closed.\n   */\n  close(onClosed = () => {}) {\n    const menu = this.submenuEl;\n    if (!menu || !menu.open) return;\n\n    this.dispatchEvent(new ActivateTypeaheadEvent());\n    menu.quick = true;\n    menu.close();\n    this.active = false;\n    this.selected = false;\n    menu.addEventListener('closed', onClosed, {once: true});\n  }\n\n  /**\n   * Determines whether the given KeyboardEvent code is one that should open\n   * the submenu. This is RTL-aware. By default, left, right, space, or enter.\n   *\n   * @param code The native KeyboardEvent code.\n   * @return Whether or not the key code should open the submenu.\n   */\n  protected isSubmenuOpenKey(code: string) {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnterKey = isRtl ? NAVIGABLE_KEY.LEFT : NAVIGABLE_KEY.RIGHT;\n    switch (code) {\n      case arrowEnterKey:\n      case SELECTION_KEY.SPACE:\n      case SELECTION_KEY.ENTER:\n        return true;\n      default:\n        return false;\n    }\n  }\n\n  /**\n   * Determines whether the given KeyboardEvent code is one that should close\n   * the submenu. This is RTL-aware. By default right, left, or escape.\n   *\n   * @param code The native KeyboardEvent code.\n   * @return Whether or not the key code should close the submenu.\n   */\n  protected isSubmenuCloseKey(code: string) {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnterKey = isRtl ? NAVIGABLE_KEY.RIGHT : NAVIGABLE_KEY.LEFT;\n    switch (code) {\n      case arrowEnterKey:\n      case KEYDOWN_CLOSE_KEYS.ESCAPE:\n        return true;\n      default:\n        return false;\n    }\n  }\n}\n"]}

package/navigationbar/lib/_navigation-bar.scss

@@ -6,12 +6,17 @@
 // 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 '../../sass/theme';
 @use '../../tokens';
 // go/keep-sorted end
 
+$_md-sys-motion: tokens.md-sys-motion-values();
+
 @mixin theme($tokens) {
   $tokens: theme.validate-theme(
     tokens.md-comp-navigation-bar-values(),
@@ -33,7 +38,6 @@
 
     @include elevation.theme(
       (
-        'duration': 280ms,
         'level': var(--_container-elevation),
         'shadow-color': var(--_container-shadow-color),
       )
@@ -57,6 +61,8 @@
   }
 
   md-elevation {
+    transition-duration: 280ms;
+    transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');
     z-index: 0;
   }
 }

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 `: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, #1d1b20));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_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, #1d1b20));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_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, #1d1b20));--_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, #1d1b20));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shape: var(--md-navigation-bar-container-shape, 0px);--_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, #1d1b20));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_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, #1d1b20));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-ref-typeface-plain, 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 var(--md-ref-typeface-plain, Roboto));--_label-text-weight: var(--md-navigation-bar-label-text-weight, 500);--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-elevation-duration:280ms;--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);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-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{z-index:0}/*# 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, #1d1b20));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_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, #1d1b20));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_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, #1d1b20));--_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, #1d1b20));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shape: var(--md-navigation-bar-container-shape, 0px);--_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, #1d1b20));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_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, #1d1b20));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-ref-typeface-plain, 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 var(--md-ref-typeface-plain, Roboto));--_label-text-weight: var(--md-navigation-bar-label-text-weight, 500);--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);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-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{transition-duration:280ms;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`: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, #1d1b20));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_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, #1d1b20));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_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, #1d1b20));--_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, #1d1b20));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shape: var(--md-navigation-bar-container-shape, 0px);--_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, #1d1b20));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_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, #1d1b20));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-ref-typeface-plain, 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 var(--md-ref-typeface-plain, Roboto));--_label-text-weight: var(--md-navigation-bar-label-text-weight, 500);--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-elevation-duration:280ms;--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);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-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{z-index:0}/*# 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, #1d1b20));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_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, #1d1b20));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_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, #1d1b20));--_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, #1d1b20));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shape: var(--md-navigation-bar-container-shape, 0px);--_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, #1d1b20));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_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, #1d1b20));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-ref-typeface-plain, 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 var(--md-ref-typeface-plain, Roboto));--_label-text-weight: var(--md-navigation-bar-label-text-weight, 500);--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);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-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{transition-duration:280ms;z-index:0}/*# sourceMappingURL=navigation-bar-styles.css.map */\n`;\n "]}

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

@@ -4,18 +4,18 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import '../../elevation/elevation.js';
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 import { NavigationTab } from '../../navigationtab/lib/navigation-tab.js';
 import { NavigationBarState } from './state.js';
-/** @soyCompatible */
+/**
+ * TODO(b/265346501): add docs
+ */
 export declare class NavigationBar extends LitElement implements NavigationBarState {
     activeIndex: number;
     hideInactiveLabels: boolean;
     tabs: NavigationTab[];
     protected tabsElement: NavigationTab[];
-    ariaLabel: string;
-    /** @soyTemplate */
-    render(): TemplateResult;
+    render(): import("lit-html").TemplateResult<1>;
     protected updated(changedProperties: PropertyValues<NavigationBar>): void;
     firstUpdated(changedProperties: PropertyValues): void;
     layout(): void;

package/navigationbar/lib/navigation-bar.js

@@ -3,14 +3,16 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
+var _a;
+import { __decorate } from "tslib";
 import '../../elevation/elevation.js';
-import { html, LitElement } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
+import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
 import { isRtl } from '../../controller/is-rtl.js';
-import { ariaProperty } from '../../decorators/aria-property.js';
-/** @soyCompatible */
+/**
+ * TODO(b/265346501): add docs
+ */
 export class NavigationBar extends LitElement {
     constructor() {
         super(...arguments);
@@ -18,11 +20,12 @@ export class NavigationBar extends LitElement {
         this.hideInactiveLabels = false;
         this.tabs = [];
     }
-    /** @soyTemplate */
     render() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
         return html `<div class="md3-navigation-bar"
             role="tablist"
-            aria-label="${ifDefined(this.ariaLabel || undefined)}"
+            aria-label=${ariaLabel || nothing}
             @keydown="${this.handleKeydown}"
             @navigation-tab-interaction="${this.handleNavigationTabInteraction}"
             @navigation-tab-rendered=${this.handleNavigationTabConnected}
@@ -121,21 +124,17 @@ export class NavigationBar extends LitElement {
         }
     }
 }
+_a = NavigationBar;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
 __decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
+    property({ type: Number })
 ], NavigationBar.prototype, "activeIndex", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], NavigationBar.prototype, "hideInactiveLabels", void 0);
 __decorate([
-    queryAssignedElements({ flatten: true }),
-    __metadata("design:type", Array)
+    queryAssignedElements({ flatten: true })
 ], NavigationBar.prototype, "tabsElement", void 0);
-__decorate([
-    ariaProperty,
-    property({ attribute: 'data-aria-label', noAccessor: true }),
-    __metadata("design:type", String)
-], NavigationBar.prototype, "ariaLabel", void 0);
 //# sourceMappingURL=navigation-bar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-bar.js","sourceRoot":"","sources":["navigation-bar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {isRtl} from '../../controller/is-rtl.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {NavigationTab} from '../../navigationtab/lib/navigation-tab.js';\n\nimport {NavigationTabInteractionEvent} from './constants.js';\nimport {NavigationBarState} from './state.js';\n\n/** @soyCompatible */\nexport class NavigationBar extends LitElement implements NavigationBarState {\n  @property({type: Number}) activeIndex = 0;\n\n  @property({type: Boolean}) hideInactiveLabels = false;\n\n  tabs: NavigationTab[] = [];\n\n  @queryAssignedElements({flatten: true})\n  protected tabsElement!: NavigationTab[];\n\n  // tslint:disable-next-line:no-new-decorators\n  @ariaProperty\n  @property({attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel!: string;\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`<div class=\"md3-navigation-bar\"\n            role=\"tablist\"\n            aria-label=\"${ifDefined(this.ariaLabel || undefined)}\"\n            @keydown=\"${this.handleKeydown}\"\n            @navigation-tab-interaction=\"${this.handleNavigationTabInteraction}\"\n            @navigation-tab-rendered=${this.handleNavigationTabConnected}\n          ><md-elevation></md-elevation\n          ><div class=\"md3-navigation-bar__tabs-slot-container\"\n        ><slot></slot></div></div>`;\n  }\n\n  protected override updated(changedProperties: PropertyValues<NavigationBar>) {\n    if (changedProperties.has('activeIndex')) {\n      this.onActiveIndexChange(this.activeIndex);\n      this.dispatchEvent(new CustomEvent('navigation-bar-activated', {\n        detail:\n            {tab: this.tabs[this.activeIndex], activeIndex: this.activeIndex},\n        bubbles: true,\n        composed: true\n      }));\n    }\n\n    if (changedProperties.has('hideInactiveLabels')) {\n      this.onHideInactiveLabelsChange(this.hideInactiveLabels);\n    }\n\n    if (changedProperties.has('tabs')) {\n      this.onHideInactiveLabelsChange(this.hideInactiveLabels);\n      this.onActiveIndexChange(this.activeIndex);\n    }\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    this.layout();\n  }\n\n  layout() {\n    if (!this.tabsElement) return;\n    const navTabs: NavigationTab[] = [];\n    for (const node of this.tabsElement) {\n      navTabs.push(node);\n    }\n    this.tabs = navTabs;\n  }\n\n  private handleNavigationTabConnected(event: CustomEvent) {\n    const target = event.target as NavigationTab;\n    if (this.tabs.indexOf(target) === -1) {\n      this.layout();\n    }\n  }\n\n  private handleNavigationTabInteraction(event: NavigationTabInteractionEvent) {\n    this.activeIndex = this.tabs.indexOf(event.detail.state as NavigationTab);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const key = event.key;\n    const focusedTabIndex = this.tabs.findIndex((tab) => {\n      return tab.matches(':focus-within');\n    });\n    const isRTL = isRtl(this);\n    const maxIndex = this.tabs.length - 1;\n\n    if (key === 'Enter' || key === ' ') {\n      this.activeIndex = focusedTabIndex;\n      return;\n    }\n\n    if (key === 'Home') {\n      this.tabs[0].focus();\n      return;\n    }\n\n    if (key === 'End') {\n      this.tabs[maxIndex].focus();\n      return;\n    }\n\n    const toNextTab =\n        (key === 'ArrowRight' && !isRTL) || (key === 'ArrowLeft' && isRTL);\n    if (toNextTab && focusedTabIndex === maxIndex) {\n      this.tabs[0].focus();\n      return;\n    }\n    if (toNextTab) {\n      this.tabs[focusedTabIndex + 1].focus();\n      return;\n    }\n\n    const toPreviousTab =\n        (key === 'ArrowLeft' && !isRTL) || (key === 'ArrowRight' && isRTL);\n    if (toPreviousTab && focusedTabIndex === 0) {\n      this.tabs[maxIndex].focus();\n      return;\n    }\n    if (toPreviousTab) {\n      this.tabs[focusedTabIndex - 1].focus();\n      return;\n    }\n  }\n\n  private onActiveIndexChange(value: number) {\n    if (!this.tabs[value]) {\n      throw new Error('NavigationBar: activeIndex is out of bounds.');\n    }\n    for (let i = 0; i < this.tabs.length; i++) {\n      this.tabs[i].active = i === value;\n    }\n  }\n\n  private onHideInactiveLabelsChange(value: boolean) {\n    for (const tab of this.tabs) {\n      tab.hideInactiveLabel = value;\n    }\n  }\n}\n"]}
+{"version":3,"file":"navigation-bar.js","sourceRoot":"","sources":["navigation-bar.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAE,qBAAqB,EAAC,MAAM,mBAAmB,CAAC;AAElE,OAAO,EAAC,yBAAyB,EAAC,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAC,KAAK,EAAC,MAAM,4BAA4B,CAAC;AAOjD;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,UAAU;IAA7C;;QAK4B,gBAAW,GAAG,CAAC,CAAC;QAEf,uBAAkB,GAAG,KAAK,CAAC;QAEtD,SAAI,GAAoB,EAAE,CAAC;IA6H7B,CAAC;IAxHU,MAAM;QACb,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;yBAEU,SAAS,IAAI,OAAO;wBACrB,IAAI,CAAC,aAAa;2CACC,IAAI,CAAC,8BAA8B;uCACvC,IAAI,CAAC,4BAA4B;;;mCAGrC,CAAC;IAClC,CAAC;IAEkB,OAAO,CAAC,iBAAgD;QACzE,IAAI,iBAAiB,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE;YACxC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,0BAA0B,EAAE;gBAC7D,MAAM,EACF,EAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAC;gBACrE,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CAAC,CAAC;SACL;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,oBAAoB,CAAC,EAAE;YAC/C,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;SAC1D;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACjC,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;YACzD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SAC5C;IACH,CAAC;IAEQ,YAAY,CAAC,iBAAiC;QACrD,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACtC,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAC9B,MAAM,OAAO,GAAoB,EAAE,CAAC;QACpC,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE;YACnC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACpB;QACD,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;IACtB,CAAC;IAEO,4BAA4B,CAAC,KAAkB;QACrD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAuB,CAAC;QAC7C,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE;YACpC,IAAI,CAAC,MAAM,EAAE,CAAC;SACf;IACH,CAAC;IAEO,8BAA8B,CAAC,KAAoC;QACzE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,KAAsB,CAAC,CAAC;IAC5E,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;QACtB,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE;YAClD,OAAO,GAAG,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACtC,CAAC,CAAC,CAAC;QACH,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;QAC1B,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAEtC,IAAI,GAAG,KAAK,OAAO,IAAI,GAAG,KAAK,GAAG,EAAE;YAClC,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC;YACnC,OAAO;SACR;QAED,IAAI,GAAG,KAAK,MAAM,EAAE;YAClB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;YACrB,OAAO;SACR;QAED,IAAI,GAAG,KAAK,KAAK,EAAE;YACjB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;YAC5B,OAAO;SACR;QAED,MAAM,SAAS,GACX,CAAC,GAAG,KAAK,YAAY,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,CAAC;QACvE,IAAI,SAAS,IAAI,eAAe,KAAK,QAAQ,EAAE;YAC7C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;YACrB,OAAO;SACR;QACD,IAAI,SAAS,EAAE;YACb,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;YACvC,OAAO;SACR;QAED,MAAM,aAAa,GACf,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,KAAK,YAAY,IAAI,KAAK,CAAC,CAAC;QACvE,IAAI,aAAa,IAAI,eAAe,KAAK,CAAC,EAAE;YAC1C,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;YAC5B,OAAO;SACR;QACD,IAAI,aAAa,EAAE;YACjB,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;YACvC,OAAO;SACR;IACH,CAAC;IAEO,mBAAmB,CAAC,KAAa;QACvC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YACrB,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAC;SACjE;QACD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACzC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,KAAK,KAAK,CAAC;SACnC;IACH,CAAC;IAEO,0BAA0B,CAAC,KAAc;QAC/C,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE;YAC3B,GAAG,CAAC,iBAAiB,GAAG,KAAK,CAAC;SAC/B;IACH,CAAC;CACF;;AArIC;IACE,yBAAyB,CAAC,EAAI,CAAC,CAAC;AAClC,CAAC,GAAA,CAAA;AAEyB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;kDAAiB;AAEf;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;yDAA4B;AAKtD;IADC,qBAAqB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;kDACC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {isRtl} from '../../controller/is-rtl.js';\nimport {NavigationTab} from '../../navigationtab/lib/navigation-tab.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\nimport {NavigationTabInteractionEvent} from './constants.js';\nimport {NavigationBarState} from './state.js';\n\n/**\n * TODO(b/265346501): add docs\n */\nexport class NavigationBar extends LitElement implements NavigationBarState {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  @property({type: Number}) activeIndex = 0;\n\n  @property({type: Boolean}) hideInactiveLabels = false;\n\n  tabs: NavigationTab[] = [];\n\n  @queryAssignedElements({flatten: true})\n  protected tabsElement!: NavigationTab[];\n\n  override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`<div class=\"md3-navigation-bar\"\n            role=\"tablist\"\n            aria-label=${ariaLabel || nothing}\n            @keydown=\"${this.handleKeydown}\"\n            @navigation-tab-interaction=\"${this.handleNavigationTabInteraction}\"\n            @navigation-tab-rendered=${this.handleNavigationTabConnected}\n          ><md-elevation></md-elevation\n          ><div class=\"md3-navigation-bar__tabs-slot-container\"\n        ><slot></slot></div></div>`;\n  }\n\n  protected override updated(changedProperties: PropertyValues<NavigationBar>) {\n    if (changedProperties.has('activeIndex')) {\n      this.onActiveIndexChange(this.activeIndex);\n      this.dispatchEvent(new CustomEvent('navigation-bar-activated', {\n        detail:\n            {tab: this.tabs[this.activeIndex], activeIndex: this.activeIndex},\n        bubbles: true,\n        composed: true\n      }));\n    }\n\n    if (changedProperties.has('hideInactiveLabels')) {\n      this.onHideInactiveLabelsChange(this.hideInactiveLabels);\n    }\n\n    if (changedProperties.has('tabs')) {\n      this.onHideInactiveLabelsChange(this.hideInactiveLabels);\n      this.onActiveIndexChange(this.activeIndex);\n    }\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    this.layout();\n  }\n\n  layout() {\n    if (!this.tabsElement) return;\n    const navTabs: NavigationTab[] = [];\n    for (const node of this.tabsElement) {\n      navTabs.push(node);\n    }\n    this.tabs = navTabs;\n  }\n\n  private handleNavigationTabConnected(event: CustomEvent) {\n    const target = event.target as NavigationTab;\n    if (this.tabs.indexOf(target) === -1) {\n      this.layout();\n    }\n  }\n\n  private handleNavigationTabInteraction(event: NavigationTabInteractionEvent) {\n    this.activeIndex = this.tabs.indexOf(event.detail.state as NavigationTab);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const key = event.key;\n    const focusedTabIndex = this.tabs.findIndex((tab) => {\n      return tab.matches(':focus-within');\n    });\n    const isRTL = isRtl(this);\n    const maxIndex = this.tabs.length - 1;\n\n    if (key === 'Enter' || key === ' ') {\n      this.activeIndex = focusedTabIndex;\n      return;\n    }\n\n    if (key === 'Home') {\n      this.tabs[0].focus();\n      return;\n    }\n\n    if (key === 'End') {\n      this.tabs[maxIndex].focus();\n      return;\n    }\n\n    const toNextTab =\n        (key === 'ArrowRight' && !isRTL) || (key === 'ArrowLeft' && isRTL);\n    if (toNextTab && focusedTabIndex === maxIndex) {\n      this.tabs[0].focus();\n      return;\n    }\n    if (toNextTab) {\n      this.tabs[focusedTabIndex + 1].focus();\n      return;\n    }\n\n    const toPreviousTab =\n        (key === 'ArrowLeft' && !isRTL) || (key === 'ArrowRight' && isRTL);\n    if (toPreviousTab && focusedTabIndex === 0) {\n      this.tabs[maxIndex].focus();\n      return;\n    }\n    if (toPreviousTab) {\n      this.tabs[focusedTabIndex - 1].focus();\n      return;\n    }\n  }\n\n  private onActiveIndexChange(value: number) {\n    if (!this.tabs[value]) {\n      throw new Error('NavigationBar: activeIndex is out of bounds.');\n    }\n    for (let i = 0; i < this.tabs.length; i++) {\n      this.tabs[i].active = i === value;\n    }\n  }\n\n  private onHideInactiveLabelsChange(value: boolean) {\n    for (const tab of this.tabs) {\n      tab.hideInactiveLabel = value;\n    }\n  }\n}\n"]}

package/navigationbar/navigation-bar.d.ts

@@ -10,7 +10,6 @@ declare global {
     }
 }
 /**
- * @soyCompatible
  * @final
  * @suppress {visibility}
  */

package/navigationbar/navigation-bar.js

@@ -8,7 +8,6 @@ import { customElement } from 'lit/decorators.js';
 import { NavigationBar } from './lib/navigation-bar.js';
 import { styles } from './lib/navigation-bar-styles.css.js';
 /**
- * @soyCompatible
  * @final
  * @suppress {visibility}
  */

package/navigationbar/navigation-bar.js.map

@@ -1 +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,yBAAyB,CAAC;AACtD,OAAO,EAAC,MAAM,EAAC,MAAM,oCAAoC,CAAC;AAQ1D;;;;GAIG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,aAAa;;AAChC,sBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAE3B;SAFY,eAAe","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 './lib/navigation-bar.js';\nimport {styles} from './lib/navigation-bar-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-bar': MdNavigationBar;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-navigation-bar')\nexport class MdNavigationBar extends NavigationBar {\n  static override styles = [styles];\n}\n"]}
+{"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,yBAAyB,CAAC;AACtD,OAAO,EAAC,MAAM,EAAC,MAAM,oCAAoC,CAAC;AAQ1D;;;GAGG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,aAAa;;AAChC,sBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAE3B;SAFY,eAAe","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 './lib/navigation-bar.js';\nimport {styles} from './lib/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/navigationdrawer/lib/navigation-drawer-modal.d.ts

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

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

@@ -3,37 +3,36 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
-import { html, LitElement } from 'lit';
+var _a;
+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 { ifDefined } from 'lit/directives/if-defined.js';
-import { ariaProperty } from '../../decorators/aria-property.js';
-/** @soyCompatible */
+import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
+/**
+ * TODO(b/265346501): add docs
+ */
 export class NavigationDrawerModal extends LitElement {
     constructor() {
         super(...arguments);
-        // tslint:disable-next-line:no-new-decorators
-        this.ariaModal = 'false';
         this.opened = false;
         this.pivot = 'end';
     }
-    /** @soyTemplate */
     render() {
         const ariaExpanded = this.opened ? 'true' : 'false';
         const ariaHidden = !this.opened ? 'true' : 'false';
+        // 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-describedby="${ifDefined(this.ariaDescribedBy)}"
-        aria-expanded="${ariaExpanded}"
-        aria-hidden="${ariaHidden}"
-        aria-label="${ifDefined(this.ariaLabel)}"
-        aria-labelledby="${ifDefined(this.ariaLabelledBy)}"
-        aria-modal="${this.ariaModal}"
+        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"
@@ -44,13 +43,11 @@ export class NavigationDrawerModal extends LitElement {
       </div>
     `;
     }
-    /** @soyTemplate classMap */
     getScrimClasses() {
         return classMap({
             'md3-navigation-drawer-modal--scrim-visible': this.opened,
         });
     }
-    /** @soyTemplate classMap */
     getRenderClasses() {
         return classMap({
             'md3-navigation-drawer-modal--opened': this.opened,
@@ -73,33 +70,14 @@ export class NavigationDrawerModal extends LitElement {
         this.opened = !this.opened;
     }
 }
+_a = NavigationDrawerModal;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
 __decorate([
-    ariaProperty,
-    property({ type: String, attribute: 'data-aria-describedby', noAccessor: true }),
-    __metadata("design:type", String)
-], NavigationDrawerModal.prototype, "ariaDescribedBy", void 0);
-__decorate([
-    ariaProperty,
-    property({ type: String, attribute: 'data-aria-label', noAccessor: true }),
-    __metadata("design:type", String)
-], NavigationDrawerModal.prototype, "ariaLabel", void 0);
-__decorate([
-    ariaProperty,
-    property({ attribute: 'data-aria-modal', type: String, noAccessor: true }),
-    __metadata("design:type", String)
-], NavigationDrawerModal.prototype, "ariaModal", void 0);
-__decorate([
-    ariaProperty,
-    property({ type: String, attribute: 'data-aria-labelledby', noAccessor: true }),
-    __metadata("design:type", String)
-], NavigationDrawerModal.prototype, "ariaLabelledBy", void 0);
-__decorate([
-    property({ type: Boolean }) // tslint:disable-next-line:no-new-decorators
-    ,
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], NavigationDrawerModal.prototype, "opened", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
+    property()
 ], NavigationDrawerModal.prototype, "pivot", void 0);
 //# sourceMappingURL=navigation-drawer-modal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-drawer-modal.js","sourceRoot":"","sources":["navigation-drawer-modal.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {ariaProperty} from '../../decorators/aria-property.js';\n\n/** @soyCompatible */\nexport class NavigationDrawerModal extends LitElement {\n  /* aria properties */\n  // tslint:disable-next-line:no-new-decorators\n  @ariaProperty\n  @property(\n      {type: String, attribute: 'data-aria-describedby', noAccessor: true})\n  ariaDescribedBy: string|undefined;\n\n  // tslint:disable-next-line:no-new-decorators\n  @ariaProperty\n  @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel!: string;\n\n  // tslint:disable-next-line:no-new-decorators\n  @ariaProperty\n  @property({attribute: 'data-aria-modal', type: String, noAccessor: true})\n  override ariaModal: 'true'|'false' = 'false';\n\n  // tslint:disable-next-line:no-new-decorators\n  @ariaProperty\n  @property({type: String, attribute: 'data-aria-labelledby', noAccessor: true})\n  ariaLabelledBy: string|undefined;\n\n  @property({type: Boolean})  // tslint:disable-next-line:no-new-decorators\n  opened = false;\n  @property({type: String}) pivot: 'start'|'end' = 'end';\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    const ariaExpanded = this.opened ? 'true' : 'false';\n    const ariaHidden = !this.opened ? 'true' : 'false';\n\n    return html`\n      <div\n        class=\"md3-navigation-drawer-modal__scrim ${this.getScrimClasses()}\"\n        @click=\"${this.handleScrimClick}\">\n      </div>\n      <div\n        aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\"\n        aria-expanded=\"${ariaExpanded}\"\n        aria-hidden=\"${ariaHidden}\"\n        aria-label=\"${ifDefined(this.ariaLabel)}\"\n        aria-labelledby=\"${ifDefined(this.ariaLabelledBy)}\"\n        aria-modal=\"${this.ariaModal}\"\n        class=\"md3-navigation-drawer-modal ${this.getRenderClasses()}\"\n        @keydown=\"${this.handleKeyDown}\"\n        role=\"dialog\"><div class=\"md3-elevation-overlay\"\n        ></div>\n        <div class=\"md3-navigation-drawer-modal__slot-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /** @soyTemplate classMap */\n  protected getScrimClasses() {\n    return classMap({\n      'md3-navigation-drawer-modal--scrim-visible': this.opened,\n    });\n  }\n\n  /** @soyTemplate classMap */\n  protected getRenderClasses() {\n    return classMap({\n      'md3-navigation-drawer-modal--opened': this.opened,\n      'md3-navigation-drawer-modal--pivot-at-start': this.pivot === 'start',\n    });\n  }\n\n  protected override updated(changedProperties:\n                                 PropertyValues<NavigationDrawerModal>) {\n    if (changedProperties.has('opened')) {\n      setTimeout(() => {\n        this.dispatchEvent(new CustomEvent(\n            'navigation-drawer-changed',\n            {detail: {opened: this.opened}, bubbles: true, composed: true}));\n      }, 250);\n    }\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (e.code === 'Escape') {\n      this.opened = false;\n    }\n  }\n\n  private handleScrimClick() {\n    this.opened = !this.opened;\n  }\n}\n"]}
+{"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;AAErD,OAAO,EAAC,yBAAyB,EAAC,MAAM,wBAAwB,CAAC;AAGjE;;GAEG;AACH,MAAM,OAAO,qBAAsB,SAAQ,UAAU;IAArD;;QAK6B,WAAM,GAAG,KAAK,CAAC;QAC9B,UAAK,GAAkB,KAAK,CAAC;IA6D3C,CAAC;IA3DU,MAAM;QACb,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACpD,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;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;IAES,eAAe;QACvB,OAAO,QAAQ,CAAC;YACd,4CAA4C,EAAE,IAAI,CAAC,MAAM;SAC1D,CAAC,CAAC;IACL,CAAC;IAES,gBAAgB;QACxB,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,CAAgB;QACpC,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,EAAE;YACvB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SACrB;IACH,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC;CACF;;AAlEC;IACE,yBAAyB,CAAC,EAAI,CAAC,CAAC;AAClC,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 {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\n/**\n * TODO(b/265346501): add docs\n */\nexport class NavigationDrawerModal extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  @property({type: Boolean}) opened = false;\n  @property() pivot: 'start'|'end' = 'end';\n\n  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  protected getScrimClasses() {\n    return classMap({\n      'md3-navigation-drawer-modal--scrim-visible': this.opened,\n    });\n  }\n\n  protected getRenderClasses() {\n    return classMap({\n      'md3-navigation-drawer-modal--opened': this.opened,\n      'md3-navigation-drawer-modal--pivot-at-start': this.pivot === 'start',\n    });\n  }\n\n  protected override updated(changedProperties:\n                                 PropertyValues<NavigationDrawerModal>) {\n    if (changedProperties.has('opened')) {\n      setTimeout(() => {\n        this.dispatchEvent(new CustomEvent(\n            'navigation-drawer-changed',\n            {detail: {opened: this.opened}, bubbles: true, composed: true}));\n      }, 250);\n    }\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (e.code === 'Escape') {\n      this.opened = false;\n    }\n  }\n\n  private handleScrimClick() {\n    this.opened = !this.opened;\n  }\n}\n"]}