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

package/menu/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAG9C,OAAO,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAE1D;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAa;IAC5C;;OAEG;IACgB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,OAAO,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAC5D,CAAC;IAED,uDAAuD;IACvD,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC;IACrE,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI;QACrB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;QAC1B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO;SACR;QAED,MAAM,MAAM,GAAG,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACrC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;gBACnC,OAAO,CAAC,IAAI,CAAC,CAAC;YAChB,CAAC,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;QACnB,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,EAAE,CAAC;QACZ,MAAM,MAAM,CAAC;IACf,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Menu} from './lib/menu.js';\nimport {MenuItemHarness} from './lib/menuitem/harness.js';\n\n/**\n * Test harness for menu.\n */\nexport class MenuHarness extends Harness<Menu> {\n  /**\n   * Shows the menu and returns the first list item element.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    await this.show();\n    return (await this.getItems())[0].getInteractiveElement();\n  }\n\n  /** @return ListItem harnesses for the menu's items. */\n  getItems() {\n    return this.element.items.map((item) => new MenuItemHarness(item));\n  }\n\n  async show(quick = true) {\n    const menu = this.element;\n    menu.quick = quick;\n    if (menu.open) {\n      return;\n    }\n\n    const opened = new Promise((resolve) => {\n      menu.addEventListener('opened', () => {\n        resolve(true);\n      }, {once: true});\n    });\n\n    menu.show();\n    await opened;\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAG9C,OAAO,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAE1D;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAa;IAC5C;;OAEG;IACgB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,OAAO,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAC5D,CAAC;IAED,uDAAuD;IACvD,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC;IACrE,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI;QACrB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;QAC1B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO;SACR;QAED,MAAM,MAAM,GAAG,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACrC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;gBACnC,OAAO,CAAC,IAAI,CAAC,CAAC;YAChB,CAAC,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;QACnB,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,EAAE,CAAC;QACZ,MAAM,MAAM,CAAC;IACf,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Menu} from './lib/menu.js';\nimport {MenuItemHarness} from './lib/menuitem/harness.js';\n\nexport {MenuItemHarness} from './lib/menuitem/harness.js';\n\n/**\n * Test harness for menu.\n */\nexport class MenuHarness extends Harness<Menu> {\n  /**\n   * Shows the menu and returns the first list item element.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    await this.show();\n    return (await this.getItems())[0].getInteractiveElement();\n  }\n\n  /** @return ListItem harnesses for the menu's items. */\n  getItems() {\n    return this.element.items.map((item) => new MenuItemHarness(item));\n  }\n\n  async show(quick = true) {\n    const menu = this.element;\n    menu.quick = quick;\n    if (menu.open) {\n      return;\n    }\n\n    const opened = new Promise((resolve) => {\n      menu.addEventListener('opened', () => {\n        resolve(true);\n      }, {once: true});\n    });\n\n    menu.show();\n    await opened;\n  }\n}\n"]}

package/menu/lib/_menu.scss

@@ -9,11 +9,10 @@
 @use 'sass:string';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../elevation/lib/elevation';
+@use '../../elevation/elevation';
 @use '../../focus/focus-ring';
 @use '../../list/list' as md-list;
 @use '../../list/list-item';
-@use '../../sass/resolvers';
 @use '../../sass/theme';
 @use '../../tokens';
 // go/keep-sorted end
@@ -40,23 +39,24 @@ $_custom-property-prefix: 'menu';
 
     @include md-list.theme(
       (
-        list-item-container-color: var(--_container-color),
+        'list-item-container-color': var(--_container-color),
       )
     );
 
     @include elevation.theme(
       (
-        level: var(--_container-elevation),
-        shadow-color: var(--_container-shadow-color),
-        surface-tint: var(--_container-surface-tint-layer-color),
+        'level': var(--_container-elevation),
+        'shadow-color': var(--_container-shadow-color),
       )
     );
 
     @include focus-ring.theme(
       (
-        shape: var(--_container-shape),
+        'shape': var(--_container-shape),
       )
     );
+
+    min-width: 300px;
   }
 
   .menu {
@@ -68,6 +68,7 @@ $_custom-property-prefix: 'menu';
     user-select: none;
     max-height: inherit;
     height: inherit;
+    min-width: inherit;
 
     &.fixed {
       position: fixed;
@@ -78,6 +79,8 @@ $_custom-property-prefix: 'menu';
       max-height: inherit;
       display: block;
       overflow: auto;
+      min-width: inherit;
+      border-radius: inherit;
     }
 
     &.has-overflow md-list {
@@ -99,21 +102,10 @@ $_custom-property-prefix: 'menu';
       max-height: inherit;
     }
   }
-
-  md-elevation {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-  }
 }
 
 @function _resolve-tokens($tokens) {
-  $menu-tokens: _remove-unused-tokens($tokens);
-  @return elevation.resolve-tokens($menu-tokens, 'elevation-key');
-}
-
-// removes unused tokens
-@function _remove-unused-tokens($tokens) {
+  // removes unused tokens
   $unused-tokens: ();
   @each $token in map-keys($tokens) {
     $index: string.index($token, 'list-item');

package/menu/lib/forced-colors-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `@media(forced-colors: active){.menu{border-style:solid;border-color:CanvasText;border-width:1px}}/*# sourceMappingURL=forced-colors-styles.css.map */
+`;
+//# sourceMappingURL=forced-colors-styles.css.js.map

package/menu/lib/forced-colors-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forced-colors-styles.css.js","sourceRoot":"","sources":["forced-colors-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`@media(forced-colors: active){.menu{border-style:solid;border-color:CanvasText;border-width:1px}}/*# sourceMappingURL=forced-colors-styles.css.map */\n`;\n "]}

package/menu/lib/forced-colors-styles.scss

@@ -0,0 +1,12 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@media (forced-colors: active) {
+  .menu {
+    border-style: solid;
+    border-color: CanvasText;
+    border-width: 1px;
+  }
+}

package/menu/lib/menu-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface, #fffbfe));--_container-elevation: var(--md-menu-container-elevation, 3);--_container-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-container-shape, 4px);--_container-surface-tint-layer-color: var(--md-menu-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--md-list-container-color:var(--_container-color);--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-elevation-surface-tint:var(--_container-surface-tint-layer-color);--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_container-shape))}.menu{border-radius:var(--_container-shape);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit}.menu.fixed{position:fixed}.menu md-list{height:inherit;max-height:inherit;display:block;overflow:auto}.menu.has-overflow md-list{overflow:visible}.menu.animating md-list{pointer-events:none;overflow:hidden}.menu.animating ::slotted(.hidden){opacity:0}.menu slot{display:block;height:inherit;max-height:inherit}md-elevation{position:absolute;inset:0;pointer-events:none}/*# sourceMappingURL=menu-styles.css.map */
+export const styles = css `:host{--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-menu-container-elevation, 2);--_container-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-container-shape, 4px);--md-list-container-color:var(--_container-color);--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_container-shape));min-width:300px}.menu{border-radius:var(--_container-shape);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit}.menu.fixed{position:fixed}.menu md-list{height:inherit;max-height:inherit;display:block;overflow:auto;min-width:inherit;border-radius:inherit}.menu.has-overflow md-list{overflow:visible}.menu.animating md-list{pointer-events:none;overflow:hidden}.menu.animating ::slotted(.hidden){opacity:0}.menu slot{display:block;height:inherit;max-height:inherit}/*# sourceMappingURL=menu-styles.css.map */
 `;
 //# sourceMappingURL=menu-styles.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu-styles.css.js","sourceRoot":"","sources":["menu-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface, #fffbfe));--_container-elevation: var(--md-menu-container-elevation, 3);--_container-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-container-shape, 4px);--_container-surface-tint-layer-color: var(--md-menu-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--md-list-container-color:var(--_container-color);--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-elevation-surface-tint:var(--_container-surface-tint-layer-color);--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_container-shape))}.menu{border-radius:var(--_container-shape);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit}.menu.fixed{position:fixed}.menu md-list{height:inherit;max-height:inherit;display:block;overflow:auto}.menu.has-overflow md-list{overflow:visible}.menu.animating md-list{pointer-events:none;overflow:hidden}.menu.animating ::slotted(.hidden){opacity:0}.menu slot{display:block;height:inherit;max-height:inherit}md-elevation{position:absolute;inset:0;pointer-events:none}/*# sourceMappingURL=menu-styles.css.map */\n`;\n "]}
+{"version":3,"file":"menu-styles.css.js","sourceRoot":"","sources":["menu-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-menu-container-elevation, 2);--_container-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-container-shape, 4px);--md-list-container-color:var(--_container-color);--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_container-shape));min-width:300px}.menu{border-radius:var(--_container-shape);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit}.menu.fixed{position:fixed}.menu md-list{height:inherit;max-height:inherit;display:block;overflow:auto;min-width:inherit;border-radius:inherit}.menu.has-overflow md-list{overflow:visible}.menu.animating md-list{pointer-events:none;overflow:hidden}.menu.animating ::slotted(.hidden){opacity:0}.menu slot{display:block;height:inherit;max-height:inherit}/*# sourceMappingURL=menu-styles.css.map */\n`;\n "]}

package/menu/lib/menu.d.ts

@@ -9,18 +9,23 @@ import '../../elevation/elevation.js';
 import { LitElement } from 'lit';
 import { MdFocusRing } from '../../focus/focus-ring.js';
 import { List } from '../../list/lib/list.js';
-import { MenuItem } from './shared.js';
-import { Corner, SurfacePositionController } from './surfacePositionController.js';
+import { ARIARole } from '../../types/aria.js';
+import { ActivateTypeaheadEvent, DeactivateTypeaheadEvent, MenuItem } from './shared.js';
+import { Corner, SurfacePositionController, SurfacePositionTarget } from './surfacePositionController.js';
 import { TypeaheadController } from './typeaheadController.js';
 export { Corner } from './surfacePositionController.js';
+/**
+ * The default value for the typeahead buffer time in Milliseconds.
+ */
+export declare const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200;
 /**
  * Element to focus on when menu is first opened.
  */
 export type DefaultFocusState = 'NONE' | 'LIST_ROOT' | 'FIRST_ITEM' | 'LAST_ITEM';
 /**
- * @fires opening Fired before the opening animation begins (not fired on quick)
+ * @fires opening Fired before the opening animation begins
  * @fires opened Fired once the menu is open, after any animations
- * @fires closing Fired before the closing animation begins (not fired on quick)
+ * @fires closing Fired before the closing animation begins
  * @fires closed Fired once the menu is closed, after any animations
  */
 export declare abstract class Menu extends LitElement {
@@ -32,7 +37,7 @@ export declare abstract class Menu extends LitElement {
     /**
      * The element in which the menu should align to.
      */
-    anchor: HTMLElement | null;
+    anchor: HTMLElement & Partial<SurfacePositionTarget> | null;
     /**
      * Makes the element use `position:fixed` instead of `position:absolute`. In
      * most cases, the menu should position itself above most other
@@ -80,6 +85,10 @@ export declare abstract class Menu extends LitElement {
      * The tabindex of the underlying list element.
      */
     listTabIndex: number;
+    /**
+     * The role of the underlying list element.
+     */
+    role: ARIARole;
     /**
      * The max time between the keystrokes of the typeahead menu behavior before
      * it clears the typeahead buffer.
@@ -96,9 +105,19 @@ export declare abstract class Menu extends LitElement {
      */
     menuCorner: Corner;
     /**
-     * Keeps the user clicks outside the menu
+     * Keeps the user clicks outside the menu.
+     *
+     * NOTE: clicking outside may still cause focusout to close the menu so see
+     * `stayOpenOnFocusout`.
      */
     stayOpenOnOutsideClick: boolean;
+    /**
+     * Keeps the menu open when focus leaves the menu's composed subtree.
+     *
+     * NOTE: Focusout behavior will stop propagation of the focusout event. Set
+     * this property to true to opt-out of menu's focuout handling altogether.
+     */
+    stayOpenOnFocusout: boolean;
     /**
      * After closing, does not restore focus to the last focused element before
      * the menu was opened.
@@ -108,6 +127,7 @@ export declare abstract class Menu extends LitElement {
      * The element that should be focused by default once opened.
      */
     defaultFocus: DefaultFocusState;
+    protected typeaheadActive: boolean;
     protected openCloseAnimationSignal: import("../../motion/animation.js").AnimationSignal;
     /**
      * Whether the menu is animating upwards or downwards when opening. This is
@@ -121,7 +141,7 @@ export declare abstract class Menu extends LitElement {
     /**
      * Handles typeahead navigation through the menu.
      */
-    protected typeaheadController: TypeaheadController;
+    typeaheadController: TypeaheadController;
     /**
      * Handles positioning the surface and aligning it to the anchor.
      */
@@ -157,9 +177,11 @@ export declare abstract class Menu extends LitElement {
         fixed: boolean;
         'has-overflow': boolean;
     };
-    protected onListFocus(): void;
-    protected onListClick(): void;
-    protected onListBlur(): void;
+    protected handleFocusout(e: FocusEvent): Promise<void>;
+    protected handleListFocus(): void;
+    protected handleListClick(): void;
+    protected handleListKeydown(e: KeyboardEvent): void;
+    protected handleListBlur(): void;
     /**
      * Saves the last focused element focuses the new element based on
      * `defaultFocus`, and animates open.
@@ -190,6 +212,8 @@ export declare abstract class Menu extends LitElement {
     protected onWindowClick: (e: MouseEvent) => void;
     protected onCloseMenu(e: Event): void;
     protected onDeactivateItems(e: Event): void;
+    protected handleDeactivateTypeahead(e: DeactivateTypeaheadEvent): void;
+    protected handleActivateTypeahead(e: ActivateTypeaheadEvent): void;
     focus(): void;
     close(): void;
     show(): void;

package/menu/lib/menu.js

@@ -9,8 +9,8 @@ import { __decorate, __metadata } from "tslib";
 import '../../list/list.js';
 import '../../focus/focus-ring.js';
 import '../../elevation/elevation.js';
-import { html, LitElement } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { html, isServer, LitElement } from 'lit';
+import { eventOptions, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { ariaProperty } from '../../decorators/aria-property.js';
@@ -18,8 +18,13 @@ import { MdFocusRing } from '../../focus/focus-ring.js';
 import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
 import { List } from '../../list/lib/list.js';
 import { createAnimationSignal, EASING } from '../../motion/animation.js';
+import { isElementInSubtree } from './shared.js';
 import { SurfacePositionController } from './surfacePositionController.js';
 import { TypeaheadController } from './typeaheadController.js';
+/**
+ * The default value for the typeahead buffer time in Milliseconds.
+ */
+export const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200;
 /**
  * Gets the currently focused element on the page.
  *
@@ -38,9 +43,9 @@ function getFocusedElement(activeDoc = document) {
     return activeEl;
 }
 /**
- * @fires opening Fired before the opening animation begins (not fired on quick)
+ * @fires opening Fired before the opening animation begins
  * @fires opened Fired once the menu is open, after any animations
- * @fires closing Fired before the closing animation begins (not fired on quick)
+ * @fires closing Fired before the closing animation begins
  * @fires closed Fired once the menu is closed, after any animations
  */
 export class Menu extends LitElement {
@@ -97,11 +102,15 @@ export class Menu extends LitElement {
          * The tabindex of the underlying list element.
          */
         this.listTabIndex = 0;
+        /**
+         * The role of the underlying list element.
+         */
+        this.role = 'list';
         /**
          * The max time between the keystrokes of the typeahead menu behavior before
          * it clears the typeahead buffer.
          */
-        this.typeaheadBufferTime = 200;
+        this.typeaheadBufferTime = DEFAULT_TYPEAHEAD_BUFFER_TIME;
         /**
          * The corner of the anchor which to align the menu in the standard logical
          * property style of <block>_<inline>.
@@ -113,9 +122,19 @@ export class Menu extends LitElement {
          */
         this.menuCorner = 'START_START';
         /**
-         * Keeps the user clicks outside the menu
+         * Keeps the user clicks outside the menu.
+         *
+         * NOTE: clicking outside may still cause focusout to close the menu so see
+         * `stayOpenOnFocusout`.
          */
         this.stayOpenOnOutsideClick = false;
+        /**
+         * Keeps the menu open when focus leaves the menu's composed subtree.
+         *
+         * NOTE: Focusout behavior will stop propagation of the focusout event. Set
+         * this property to true to opt-out of menu's focuout handling altogether.
+         */
+        this.stayOpenOnFocusout = false;
         /**
          * After closing, does not restore focus to the last focused element before
          * the menu was opened.
@@ -125,6 +144,7 @@ export class Menu extends LitElement {
          * The element that should be focused by default once opened.
          */
         this.defaultFocus = 'LIST_ROOT';
+        this.typeaheadActive = true;
         this.openCloseAnimationSignal = createAnimationSignal();
         /**
          * The element that was focused before the menu opened.
@@ -137,6 +157,7 @@ export class Menu extends LitElement {
             return {
                 getItems: () => this.items,
                 typeaheadBufferTime: this.typeaheadBufferTime,
+                active: this.typeaheadActive
             };
         });
         /**
@@ -192,6 +213,7 @@ export class Menu extends LitElement {
                     break;
             }
             if (this.quick) {
+                this.dispatchEvent(new Event('opening'));
                 this.dispatchEvent(new Event('opened'));
             }
             else {
@@ -203,6 +225,9 @@ export class Menu extends LitElement {
          */
         this.beforeClose = async () => {
             this.open = false;
+            if (!this.skipRestoreFocus) {
+                this.lastFocusedElement?.focus?.();
+            }
             if (!this.quick) {
                 await this.animateClose();
             }
@@ -212,11 +237,9 @@ export class Menu extends LitElement {
          */
         this.onClosed = () => {
             if (this.quick) {
+                this.dispatchEvent(new Event('closing'));
                 this.dispatchEvent(new Event('closed'));
             }
-            if (!this.skipRestoreFocus) {
-                this.lastFocusedElement?.focus?.();
-            }
         };
         this.onWindowClick = (e) => {
             if (!this.stayOpenOnOutsideClick && !e.composedPath().includes(this)) {
@@ -250,11 +273,14 @@ export class Menu extends LitElement {
      * Renders the positionable surface element and its contents.
      */
     renderSurface() {
+        // TODO(b/274140618): elevation should be an underlay, not an overlay that
+        // tints content
         return html `
        <div
-           class="menu ${classMap(this.getSurfaceClasses())}"
-           style=${styleMap(this.menuPositionController.surfaceStyles)}>
-        ${this.renderList()} 
+          class="menu ${classMap(this.getSurfaceClasses())}"
+          style=${styleMap(this.menuPositionController.surfaceStyles)}
+          @focusout=${this.handleFocusout}>
+        ${this.renderList()}
         ${this.renderElevation()}
         ${this.renderFocusRing()}
        </div>
@@ -265,17 +291,16 @@ export class Menu extends LitElement {
      */
     renderList() {
         return html `
-       <md-list
-          role="menu"
-          class="list"
+      <md-list
           .ariaLabel=${this.ariaLabel}
+          .role=${this.role}
           listTabIndex=${this.listTabIndex}
-          @focus=${this.onListFocus}
-          @blur=${this.onListBlur}
-          @click=${this.onListClick}
-          @keydown=${this.typeaheadController.onKeydown}>
-         ${this.renderMenuItems()}
-       </md-list>`;
+          @focus=${this.handleListFocus}
+          @blur=${this.handleListBlur}
+          @click=${this.handleListClick}
+          @keydown=${this.handleListKeydown}>
+        ${this.renderMenuItems()}
+      </md-list>`;
     }
     /**
      * Renders the menu items' slot
@@ -283,13 +308,15 @@ export class Menu extends LitElement {
     renderMenuItems() {
         return html `<slot
         @close-menu=${this.onCloseMenu}
-        @deactivate-items=${this.onDeactivateItems}></slot>`;
+        @deactivate-items=${this.onDeactivateItems}
+        @deactivate-typeahead=${this.handleDeactivateTypeahead}
+        @activate-typeahead=${this.handleActivateTypeahead}></slot>`;
     }
     /**
      * Renders the elevation component.
      */
     renderElevation() {
-        return html `<md-elevation shadow surface></md-elevation>`;
+        return html `<md-elevation></md-elevation>`;
     }
     /**
      * Renders the focus ring component.
@@ -304,14 +331,42 @@ export class Menu extends LitElement {
             'has-overflow': this.hasOverflow,
         };
     }
-    onListFocus() {
+    async handleFocusout(e) {
+        if (this.stayOpenOnFocusout) {
+            return;
+        }
+        // Stop propagation to prevent nested menus from interfering with each other
+        e.stopPropagation();
+        if (e.relatedTarget) {
+            // Don't close the menu if we are switching focus between menu,
+            // md-menu-item, and md-list
+            if (isElementInSubtree(e.relatedTarget, this)) {
+                return;
+            }
+        }
+        const oldRestoreFocus = this.skipRestoreFocus;
+        // allow focus to continue to the next focused object rather than returning
+        this.skipRestoreFocus = true;
+        this.close();
+        // await for close
+        await this.updateComplete;
+        // return to previous behavior
+        this.skipRestoreFocus = oldRestoreFocus;
+    }
+    handleListFocus() {
         this.focusRing.visible = shouldShowStrongFocus();
     }
-    onListClick() {
+    handleListClick() {
         pointerPress();
         this.focusRing.visible = shouldShowStrongFocus();
     }
-    onListBlur() {
+    // Capture so that we can grab the event before it reaches the list item
+    // istelf. Specifically useful for the case where typeahead encounters a space
+    // and we don't want the menu item to close the menu.
+    handleListKeydown(e) {
+        this.typeaheadController.onKeydown(e);
+    }
+    handleListBlur() {
         this.focusRing.visible = false;
     }
     /**
@@ -482,14 +537,14 @@ export class Menu extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        if (window && window.addEventListener) {
+        if (!isServer) {
             window.addEventListener('click', this.onWindowClick, { capture: true });
         }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        if (window && window.removeEventListener) {
-            window.removeEventListener('click', this.onWindowClick);
+        if (!isServer) {
+            window.removeEventListener('click', this.onWindowClick, { capture: true });
         }
     }
     onCloseMenu(e) {
@@ -502,6 +557,18 @@ export class Menu extends LitElement {
             item.active = false;
         }
     }
+    handleDeactivateTypeahead(e) {
+        // stopPropagation so that this does not deactivate any typeaheads in menus
+        // nested above it e.g. md-sub-menu-item
+        e.stopPropagation();
+        this.typeaheadActive = false;
+    }
+    handleActivateTypeahead(e) {
+        // stopPropagation so that this does not activate any typeaheads in menus
+        // nested above it e.g. md-sub-menu-item
+        e.stopPropagation();
+        this.typeaheadActive = true;
+    }
     focus() {
         this.listElement?.focus();
     }
@@ -538,7 +605,7 @@ __decorate([
 ], Menu.prototype, "ariaLabel", void 0);
 __decorate([
     property({ attribute: false }),
-    __metadata("design:type", HTMLElement)
+    __metadata("design:type", Object)
 ], Menu.prototype, "anchor", void 0);
 __decorate([
     property({ type: Boolean }),
@@ -568,6 +635,11 @@ __decorate([
     property({ type: Number, attribute: 'list-tab-index' }),
     __metadata("design:type", Object)
 ], Menu.prototype, "listTabIndex", void 0);
+__decorate([
+    ariaProperty,
+    property({ type: String, attribute: 'data-role', noAccessor: true }),
+    __metadata("design:type", String)
+], Menu.prototype, "role", void 0);
 __decorate([
     property({ type: Number, attribute: 'typeahead-delay' }),
     __metadata("design:type", Object)
@@ -584,6 +656,10 @@ __decorate([
     property({ type: Boolean, attribute: 'stay-open-on-outside-click' }),
     __metadata("design:type", Object)
 ], Menu.prototype, "stayOpenOnOutsideClick", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'stay-open-on-focusout' }),
+    __metadata("design:type", Object)
+], Menu.prototype, "stayOpenOnFocusout", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'skip-restore-focus' }),
     __metadata("design:type", Object)
@@ -592,4 +668,14 @@ __decorate([
     property({ type: String, attribute: 'default-focus' }),
     __metadata("design:type", String)
 ], Menu.prototype, "defaultFocus", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Menu.prototype, "typeaheadActive", void 0);
+__decorate([
+    eventOptions({ capture: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], Menu.prototype, "handleListKeydown", null);
 //# sourceMappingURL=menu.js.map