@material/web 1.0.0-pre.1 → 1.0.0-pre.2

package/menu/lib/_menu.scss

@@ -3,24 +3,21 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use 'sass:map';
 
-@use '../../elevation/lib/elevation';
 @use '../../list/list';
-@use '../../list/list-item';
-@use '../../menusurface/menu-surface';
+@use './menuitem/menu-item';
 @use '../../sass/resolvers';
 @use '../../sass/theme';
 @use '../../tokens';
+@use '../../elevation/lib/elevation';
+@use '../../focus/focus-ring';
 
 $_custom-property-prefix: 'menu';
 
 @mixin theme($theme) {
   $theme: theme.validate-theme(tokens.md-comp-menu-values(), $theme);
-  $theme: _resolve-tokens($tokens);
+  $theme: _resolve-tokens($theme);
   $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
 
   @include theme.emit-theme-vars($theme);
@@ -35,74 +32,76 @@ $_custom-property-prefix: 'menu';
     @each $token, $value in $tokens {
       --_#{$token}: #{$value};
     }
-  }
 
-  .md3-menu {
-    @include menu-surface.theme(
+    @include list.theme(
       (
-        container-elevation: var(--_container-elevation),
-        container-shape: var(--_container-shape),
-        container-shadow-color: var(--_container-shadow-color),
-        container-surface-tint-layer-color:
-          var(--_container-surface-tint-layer-color),
+        container-color: var(--_container-color),
       )
     );
 
-    @include list.theme(
+    @include elevation.theme(
       (
-        container-color: var(--_container-color),
-        container-surface-tint-layer-color:
-          var(--_container-surface-tint-layer-color),
-        container-elevation: var(--_container-elevation),
+        level: var(--_container-elevation),
+        shadow-color: var(--_container-shadow-color),
+        surface-tint: var(--_container-surface-tint-layer-color),
       )
     );
-    @include list-item.theme(
+
+    @include focus-ring.theme(
       (
-        list-item-container-color: var(--_container-color),
-        list-item-one-line-container-height: var(--_list-item-container-height),
-        list-item-disabled-label-text-color:
-          var(--_list-item-disabled-label-text-color),
-        list-item-disabled-label-text-opacity:
-          var(--_list-item-disabled-label-text-opacity),
-        list-item-hover-label-text-color:
-          var(--_list-item-hover-label-text-color),
-        list-item-hover-state-layer-color:
-          var(--_list-item-hover-state-layer-color),
-        list-item-hover-state-layer-opacity:
-          var(--_list-item-hover-state-layer-opacity),
-        list-item-label-text-color: var(--_list-item-label-text-color),
-        list-item-label-text-font: var(--_list-item-label-text-font),
-        list-item-label-text-line-height:
-          var(--_list-item-label-text-line-height),
-        list-item-label-text-size: var(--_list-item-label-text-size),
-        list-item-label-text-tracking: var(--_list-item-label-text-tracking),
-        list-item-label-text-weight: var(--_list-item-label-text-tracking),
-        list-item-disabled-leading-icon-color:
-          var(--_list-item-with-leading-icon-disabled-leading-icon-color),
-        list-item-disabled-leading-icon-opacity:
-          var(--_list-item-with-leading-icon-disabled-leading-icon-opacity),
-        list-item-hover-leading-icon-color:
-          var(--_list-item-with-leading-icon-hover-icon-color),
-        list-item-leading-icon-color:
-          var(--_list-item-with-leading-icon-leading-icon-color),
-        list-item-leading-icon-size:
-          var(--_list-item-with-leading-icon-leading-icon-size),
-        list-item-disabled-trailing-icon-color:
-          var(--_list-item-with-trailing-icon-disabled-trailing-icon-color),
-        list-item-disabled-trailing-icon-opacity:
-          var(--_list-item-with-trailing-icon-disabled-trailing-icon-opacity),
-        list-item-hover-trailing-icon-color:
-          var(--_list-item-with-trailing-icon-hover-icon-color),
-        list-item-trailing-icon-color:
-          var(--_list-item-with-trailing-icon-trailing-icon-color),
-        list-item-trailing-icon-size:
-          var(--_list-item-with-leading-icon-trailing-icon-size),
+        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;
+
+    &.fixed {
+      position: fixed;
+    }
+
+    md-list {
+      height: inherit;
+      max-height: inherit;
+      display: block;
+      overflow: auto;
+    }
+
+    &.has-overflow md-list {
+      overflow: visible;
+    }
+
+    &.animating md-list {
+      pointer-events: none;
+      overflow: hidden;
+    }
+
+    &.animating ::slotted(.hidden) {
+      opacity: 0;
+    }
+
+    slot {
+      display: block;
+      height: inherit;
+      max-height: inherit;
+    }
+  }
+
+  md-elevation {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
 }
 
 @function _resolve-tokens($tokens) {
-  $tokens: elevation.resolve-tokens($tokens, 'container-elevation');
-  @return $tokens;
+  @return elevation.resolve-tokens($tokens, 'elevation-key');
 }

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{--_cascading-menu-indicator-icon-color: var(--md-menu-cascading-menu-indicator-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_cascading-menu-indicator-icon-size: var(--md-menu-cascading-menu-indicator-icon-size, 24px);--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface, #fffbfe));--_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);--_container-surface-tint-layer-color: var(--md-menu-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_divider-color: var(--md-menu-divider-color, var(--md-sys-color-surface-variant, #e7e0ec));--_divider-height: var(--md-menu-divider-height, 1px);--_list-item-container-height: var(--md-menu-list-item-container-height, 48px);--_list-item-disabled-label-text-color: var(--md-menu-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-label-text-opacity: var(--md-menu-list-item-disabled-label-text-opacity, 0.38);--_list-item-focus-label-text-color: var(--md-menu-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-color: var(--md-menu-list-item-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-opacity: var(--md-menu-list-item-focus-state-layer-opacity, 0.12);--_list-item-hover-label-text-color: var(--md-menu-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-color: var(--md-menu-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-opacity: var(--md-menu-list-item-hover-state-layer-opacity, 0.08);--_list-item-label-text-color: var(--md-menu-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-label-text-font: var(--md-menu-list-item-label-text-font, Roboto);--_list-item-label-text-line-height: var(--md-menu-list-item-label-text-line-height, 1.25rem);--_list-item-label-text-size: var(--md-menu-list-item-label-text-size, 0.875rem);--_list-item-label-text-tracking: var(--md-menu-list-item-label-text-tracking, 0.006rem);--_list-item-label-text-type: var(--md-menu-list-item-label-text-type, 500 0.875rem / 1.25rem Roboto);--_list-item-label-text-weight: var(--md-menu-list-item-label-text-weight, 500);--_list-item-pressed-label-text-color: var(--md-menu-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-color: var(--md-menu-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-opacity: var(--md-menu-list-item-pressed-state-layer-opacity, 0.12);--_list-item-selected-container-color: var(--md-menu-list-item-selected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_list-item-with-leading-icon-disabled-leading-icon-color: var(--md-menu-list-item-with-leading-icon-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-with-leading-icon-disabled-leading-icon-opacity: var(--md-menu-list-item-with-leading-icon-disabled-leading-icon-opacity, 0.38);--_list-item-with-leading-icon-focus-icon-color: var(--md-menu-list-item-with-leading-icon-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-hover-icon-color: var(--md-menu-list-item-with-leading-icon-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-leading-icon-color: var(--md-menu-list-item-with-leading-icon-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-leading-icon-size: var(--md-menu-list-item-with-leading-icon-leading-icon-size, 24px);--_list-item-with-leading-icon-pressed-icon-color: var(--md-menu-list-item-with-leading-icon-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-disabled-trailing-icon-color: var(--md-menu-list-item-with-trailing-icon-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-with-trailing-icon-disabled-trailing-icon-opacity: var(--md-menu-list-item-with-trailing-icon-disabled-trailing-icon-opacity, 0.38);--_list-item-with-trailing-icon-focus-icon-color: var(--md-menu-list-item-with-trailing-icon-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-hover-icon-color: var(--md-menu-list-item-with-trailing-icon-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-pressed-icon-color: var(--md-menu-list-item-with-trailing-icon-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-trailing-icon-color: var(--md-menu-list-item-with-trailing-icon-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-trailing-icon-size: var(--md-menu-list-item-with-trailing-icon-trailing-icon-size, 24px)}.md3-menu{--md-menu-surface-container-elevation:var(--_container-elevation);--md-menu-surface-container-shape:var(--_container-shape);--md-menu-surface-container-shadow-color:var(--_container-shadow-color);--md-menu-surface-container-surface-tint-layer-color:var(--_container-surface-tint-layer-color);--md-list-container-color:var(--_container-color);--md-list-container-surface-tint-layer-color:var(--_container-surface-tint-layer-color);--md-list-container-elevation:var(--_container-elevation);--md-list-list-item-container-color:var(--_container-color);--md-list-list-item-one-line-container-height:var(--_list-item-container-height);--md-list-list-item-disabled-label-text-color:var(--_list-item-disabled-label-text-color);--md-list-list-item-disabled-label-text-opacity:var(--_list-item-disabled-label-text-opacity);--md-list-list-item-hover-label-text-color:var(--_list-item-hover-label-text-color);--md-list-list-item-hover-state-layer-color:var(--_list-item-hover-state-layer-color);--md-list-list-item-hover-state-layer-opacity:var(--_list-item-hover-state-layer-opacity);--md-list-list-item-label-text-color:var(--_list-item-label-text-color);--md-list-list-item-label-text-font:var(--_list-item-label-text-font);--md-list-list-item-label-text-line-height:var(--_list-item-label-text-line-height);--md-list-list-item-label-text-size:var(--_list-item-label-text-size);--md-list-list-item-label-text-tracking:var(--_list-item-label-text-tracking);--md-list-list-item-label-text-weight:var(--_list-item-label-text-tracking);--md-list-list-item-disabled-leading-icon-color:var(--_list-item-with-leading-icon-disabled-leading-icon-color);--md-list-list-item-disabled-leading-icon-opacity:var(--_list-item-with-leading-icon-disabled-leading-icon-opacity);--md-list-list-item-hover-leading-icon-color:var(--_list-item-with-leading-icon-hover-icon-color);--md-list-list-item-leading-icon-color:var(--_list-item-with-leading-icon-leading-icon-color);--md-list-list-item-leading-icon-size:var(--_list-item-with-leading-icon-leading-icon-size);--md-list-list-item-disabled-trailing-icon-color:var(--_list-item-with-trailing-icon-disabled-trailing-icon-color);--md-list-list-item-disabled-trailing-icon-opacity:var(--_list-item-with-trailing-icon-disabled-trailing-icon-opacity);--md-list-list-item-hover-trailing-icon-color:var(--_list-item-with-trailing-icon-hover-icon-color);--md-list-list-item-trailing-icon-color:var(--_list-item-with-trailing-icon-trailing-icon-color);--md-list-list-item-trailing-icon-size:var(--_list-item-with-leading-icon-trailing-icon-size)}/*# sourceMappingURL=menu-styles.css.map */
+export const styles = css `:host{--_cascading-menu-indicator-icon-color: var(--md-menu-cascading-menu-indicator-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_cascading-menu-indicator-icon-size: var(--md-menu-cascading-menu-indicator-icon-size, 24px);--_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));--_list-item-container-height: var(--md-menu-list-item-container-height, 48px);--_list-item-disabled-label-text-color: var(--md-menu-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-label-text-opacity: var(--md-menu-list-item-disabled-label-text-opacity, 0.38);--_list-item-focus-label-text-color: var(--md-menu-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-color: var(--md-menu-list-item-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-opacity: var(--md-menu-list-item-focus-state-layer-opacity, 0.12);--_list-item-hover-label-text-color: var(--md-menu-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-color: var(--md-menu-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-opacity: var(--md-menu-list-item-hover-state-layer-opacity, 0.08);--_list-item-label-text-color: var(--md-menu-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-label-text-font: var(--md-menu-list-item-label-text-font, Roboto);--_list-item-label-text-line-height: var(--md-menu-list-item-label-text-line-height, 1.25rem);--_list-item-label-text-size: var(--md-menu-list-item-label-text-size, 0.875rem);--_list-item-label-text-tracking: var(--md-menu-list-item-label-text-tracking, 0.006rem);--_list-item-label-text-type: var(--md-menu-list-item-label-text-type, 500 0.875rem / 1.25rem Roboto);--_list-item-label-text-weight: var(--md-menu-list-item-label-text-weight, 500);--_list-item-pressed-label-text-color: var(--md-menu-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-color: var(--md-menu-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-opacity: var(--md-menu-list-item-pressed-state-layer-opacity, 0.12);--_list-item-selected-container-color: var(--md-menu-list-item-selected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_list-item-with-leading-icon-disabled-leading-icon-color: var(--md-menu-list-item-with-leading-icon-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-with-leading-icon-disabled-leading-icon-opacity: var(--md-menu-list-item-with-leading-icon-disabled-leading-icon-opacity, 0.38);--_list-item-with-leading-icon-focus-icon-color: var(--md-menu-list-item-with-leading-icon-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-hover-icon-color: var(--md-menu-list-item-with-leading-icon-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-leading-icon-color: var(--md-menu-list-item-with-leading-icon-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-leading-icon-size: var(--md-menu-list-item-with-leading-icon-leading-icon-size, 24px);--_list-item-with-leading-icon-pressed-icon-color: var(--md-menu-list-item-with-leading-icon-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-disabled-trailing-icon-color: var(--md-menu-list-item-with-trailing-icon-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-with-trailing-icon-disabled-trailing-icon-opacity: var(--md-menu-list-item-with-trailing-icon-disabled-trailing-icon-opacity, 0.38);--_list-item-with-trailing-icon-focus-icon-color: var(--md-menu-list-item-with-trailing-icon-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-hover-icon-color: var(--md-menu-list-item-with-trailing-icon-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-pressed-icon-color: var(--md-menu-list-item-with-trailing-icon-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-trailing-icon-color: var(--md-menu-list-item-with-trailing-icon-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-trailing-icon-size: var(--md-menu-list-item-with-trailing-icon-trailing-icon-size, 24px);--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(--_container-shape);--md-focus-ring-shape-start-end:var(--_container-shape);--md-focus-ring-shape-end-end:var(--_container-shape);--md-focus-ring-shape-end-start: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 */
 `;
 //# 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{--_cascading-menu-indicator-icon-color: var(--md-menu-cascading-menu-indicator-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_cascading-menu-indicator-icon-size: var(--md-menu-cascading-menu-indicator-icon-size, 24px);--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface, #fffbfe));--_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);--_container-surface-tint-layer-color: var(--md-menu-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_divider-color: var(--md-menu-divider-color, var(--md-sys-color-surface-variant, #e7e0ec));--_divider-height: var(--md-menu-divider-height, 1px);--_list-item-container-height: var(--md-menu-list-item-container-height, 48px);--_list-item-disabled-label-text-color: var(--md-menu-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-label-text-opacity: var(--md-menu-list-item-disabled-label-text-opacity, 0.38);--_list-item-focus-label-text-color: var(--md-menu-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-color: var(--md-menu-list-item-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-opacity: var(--md-menu-list-item-focus-state-layer-opacity, 0.12);--_list-item-hover-label-text-color: var(--md-menu-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-color: var(--md-menu-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-opacity: var(--md-menu-list-item-hover-state-layer-opacity, 0.08);--_list-item-label-text-color: var(--md-menu-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-label-text-font: var(--md-menu-list-item-label-text-font, Roboto);--_list-item-label-text-line-height: var(--md-menu-list-item-label-text-line-height, 1.25rem);--_list-item-label-text-size: var(--md-menu-list-item-label-text-size, 0.875rem);--_list-item-label-text-tracking: var(--md-menu-list-item-label-text-tracking, 0.006rem);--_list-item-label-text-type: var(--md-menu-list-item-label-text-type, 500 0.875rem / 1.25rem Roboto);--_list-item-label-text-weight: var(--md-menu-list-item-label-text-weight, 500);--_list-item-pressed-label-text-color: var(--md-menu-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-color: var(--md-menu-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-opacity: var(--md-menu-list-item-pressed-state-layer-opacity, 0.12);--_list-item-selected-container-color: var(--md-menu-list-item-selected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_list-item-with-leading-icon-disabled-leading-icon-color: var(--md-menu-list-item-with-leading-icon-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-with-leading-icon-disabled-leading-icon-opacity: var(--md-menu-list-item-with-leading-icon-disabled-leading-icon-opacity, 0.38);--_list-item-with-leading-icon-focus-icon-color: var(--md-menu-list-item-with-leading-icon-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-hover-icon-color: var(--md-menu-list-item-with-leading-icon-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-leading-icon-color: var(--md-menu-list-item-with-leading-icon-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-leading-icon-size: var(--md-menu-list-item-with-leading-icon-leading-icon-size, 24px);--_list-item-with-leading-icon-pressed-icon-color: var(--md-menu-list-item-with-leading-icon-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-disabled-trailing-icon-color: var(--md-menu-list-item-with-trailing-icon-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-with-trailing-icon-disabled-trailing-icon-opacity: var(--md-menu-list-item-with-trailing-icon-disabled-trailing-icon-opacity, 0.38);--_list-item-with-trailing-icon-focus-icon-color: var(--md-menu-list-item-with-trailing-icon-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-hover-icon-color: var(--md-menu-list-item-with-trailing-icon-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-pressed-icon-color: var(--md-menu-list-item-with-trailing-icon-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-trailing-icon-color: var(--md-menu-list-item-with-trailing-icon-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-trailing-icon-size: var(--md-menu-list-item-with-trailing-icon-trailing-icon-size, 24px)}.md3-menu{--md-menu-surface-container-elevation:var(--_container-elevation);--md-menu-surface-container-shape:var(--_container-shape);--md-menu-surface-container-shadow-color:var(--_container-shadow-color);--md-menu-surface-container-surface-tint-layer-color:var(--_container-surface-tint-layer-color);--md-list-container-color:var(--_container-color);--md-list-container-surface-tint-layer-color:var(--_container-surface-tint-layer-color);--md-list-container-elevation:var(--_container-elevation);--md-list-list-item-container-color:var(--_container-color);--md-list-list-item-one-line-container-height:var(--_list-item-container-height);--md-list-list-item-disabled-label-text-color:var(--_list-item-disabled-label-text-color);--md-list-list-item-disabled-label-text-opacity:var(--_list-item-disabled-label-text-opacity);--md-list-list-item-hover-label-text-color:var(--_list-item-hover-label-text-color);--md-list-list-item-hover-state-layer-color:var(--_list-item-hover-state-layer-color);--md-list-list-item-hover-state-layer-opacity:var(--_list-item-hover-state-layer-opacity);--md-list-list-item-label-text-color:var(--_list-item-label-text-color);--md-list-list-item-label-text-font:var(--_list-item-label-text-font);--md-list-list-item-label-text-line-height:var(--_list-item-label-text-line-height);--md-list-list-item-label-text-size:var(--_list-item-label-text-size);--md-list-list-item-label-text-tracking:var(--_list-item-label-text-tracking);--md-list-list-item-label-text-weight:var(--_list-item-label-text-tracking);--md-list-list-item-disabled-leading-icon-color:var(--_list-item-with-leading-icon-disabled-leading-icon-color);--md-list-list-item-disabled-leading-icon-opacity:var(--_list-item-with-leading-icon-disabled-leading-icon-opacity);--md-list-list-item-hover-leading-icon-color:var(--_list-item-with-leading-icon-hover-icon-color);--md-list-list-item-leading-icon-color:var(--_list-item-with-leading-icon-leading-icon-color);--md-list-list-item-leading-icon-size:var(--_list-item-with-leading-icon-leading-icon-size);--md-list-list-item-disabled-trailing-icon-color:var(--_list-item-with-trailing-icon-disabled-trailing-icon-color);--md-list-list-item-disabled-trailing-icon-opacity:var(--_list-item-with-trailing-icon-disabled-trailing-icon-opacity);--md-list-list-item-hover-trailing-icon-color:var(--_list-item-with-trailing-icon-hover-icon-color);--md-list-list-item-trailing-icon-color:var(--_list-item-with-trailing-icon-trailing-icon-color);--md-list-list-item-trailing-icon-size:var(--_list-item-with-leading-icon-trailing-icon-size)}/*# 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{--_cascading-menu-indicator-icon-color: var(--md-menu-cascading-menu-indicator-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_cascading-menu-indicator-icon-size: var(--md-menu-cascading-menu-indicator-icon-size, 24px);--_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));--_list-item-container-height: var(--md-menu-list-item-container-height, 48px);--_list-item-disabled-label-text-color: var(--md-menu-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-label-text-opacity: var(--md-menu-list-item-disabled-label-text-opacity, 0.38);--_list-item-focus-label-text-color: var(--md-menu-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-color: var(--md-menu-list-item-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-opacity: var(--md-menu-list-item-focus-state-layer-opacity, 0.12);--_list-item-hover-label-text-color: var(--md-menu-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-color: var(--md-menu-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-opacity: var(--md-menu-list-item-hover-state-layer-opacity, 0.08);--_list-item-label-text-color: var(--md-menu-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-label-text-font: var(--md-menu-list-item-label-text-font, Roboto);--_list-item-label-text-line-height: var(--md-menu-list-item-label-text-line-height, 1.25rem);--_list-item-label-text-size: var(--md-menu-list-item-label-text-size, 0.875rem);--_list-item-label-text-tracking: var(--md-menu-list-item-label-text-tracking, 0.006rem);--_list-item-label-text-type: var(--md-menu-list-item-label-text-type, 500 0.875rem / 1.25rem Roboto);--_list-item-label-text-weight: var(--md-menu-list-item-label-text-weight, 500);--_list-item-pressed-label-text-color: var(--md-menu-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-color: var(--md-menu-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-opacity: var(--md-menu-list-item-pressed-state-layer-opacity, 0.12);--_list-item-selected-container-color: var(--md-menu-list-item-selected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_list-item-with-leading-icon-disabled-leading-icon-color: var(--md-menu-list-item-with-leading-icon-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-with-leading-icon-disabled-leading-icon-opacity: var(--md-menu-list-item-with-leading-icon-disabled-leading-icon-opacity, 0.38);--_list-item-with-leading-icon-focus-icon-color: var(--md-menu-list-item-with-leading-icon-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-hover-icon-color: var(--md-menu-list-item-with-leading-icon-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-leading-icon-color: var(--md-menu-list-item-with-leading-icon-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-leading-icon-size: var(--md-menu-list-item-with-leading-icon-leading-icon-size, 24px);--_list-item-with-leading-icon-pressed-icon-color: var(--md-menu-list-item-with-leading-icon-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-disabled-trailing-icon-color: var(--md-menu-list-item-with-trailing-icon-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-with-trailing-icon-disabled-trailing-icon-opacity: var(--md-menu-list-item-with-trailing-icon-disabled-trailing-icon-opacity, 0.38);--_list-item-with-trailing-icon-focus-icon-color: var(--md-menu-list-item-with-trailing-icon-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-hover-icon-color: var(--md-menu-list-item-with-trailing-icon-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-pressed-icon-color: var(--md-menu-list-item-with-trailing-icon-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-trailing-icon-color: var(--md-menu-list-item-with-trailing-icon-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-trailing-icon-size: var(--md-menu-list-item-with-trailing-icon-trailing-icon-size, 24px);--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(--_container-shape);--md-focus-ring-shape-start-end:var(--_container-shape);--md-focus-ring-shape-end-end:var(--_container-shape);--md-focus-ring-shape-end-start: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 "]}

package/menu/lib/menu.d.ts

@@ -4,59 +4,193 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import '../../list/list.js';
-import '../../menusurface/menu-surface.js';
+import '../../focus/focus-ring.js';
+import '../../elevation/elevation.js';
 import { LitElement } from 'lit';
+import { MdFocusRing } from '../../focus/focus-ring.js';
 import { List } from '../../list/lib/list.js';
-import { ListItem } from '../../list/lib/listitem/list-item.js';
-import { Corner, MenuSurface } from '../../menusurface/lib/menu-surface.js';
-import { MDCMenuAdapter } from './adapter.js';
-import { MDCMenuFoundation } from './foundation.js';
-interface ActionDetail {
-    item: ListItem;
-}
-/** Element to focus on when menu is first opened. */
+import { MenuItem } from './shared.js';
+import { Corner, SurfacePositionController } from './surfacePositionController.js';
+import { TypeaheadController } from './typeaheadController.js';
+export { Corner } from './surfacePositionController.js';
+/**
+ * Element to focus on when menu is first opened.
+ */
 export declare type DefaultFocusState = 'NONE' | 'LIST_ROOT' | 'FIRST_ITEM' | 'LAST_ITEM';
 /**
- * @fires selected {SelectedDetail}
- * @fires action {ActionDetail}
- * @fires items-updated
- * @fires opened
- * @fires closed
+ * @fires opening Fired before the opening animation begins (not fired on quick)
+ * @fires opened Fired once the menu is open, after any animations
+ * @fires closing Fired before the closing animation begins (not fired on quick)
+ * @fires closed Fired once the menu is closed, after any animations
  */
 export declare abstract class Menu extends LitElement {
-    protected mdcFoundation: MDCMenuFoundation;
-    protected listElementInternal: List | null;
-    mdcRoot: MenuSurface;
-    slotElement: HTMLSlotElement | null;
-    anchor: HTMLElement | null;
+    protected readonly listElement: List | null;
+    protected readonly surfaceEl: HTMLElement | null;
+    protected readonly slotEl: HTMLSlotElement | null;
+    protected readonly focusRing: MdFocusRing;
     ariaLabel: string;
-    open: boolean;
-    quick: boolean;
-    corner: Corner;
-    x: number | null;
-    y: number | null;
-    absolute: boolean;
-    activatable: boolean;
+    /**
+     * The element in which the menu should align to.
+     */
+    anchor: HTMLElement | null;
+    /**
+     * Makes the element use `position:fixed` instead of `position:absolute`. In
+     * most cases, the menu should position itself above most other
+     * `position:absolute` or `position:fixed` elements when placed inside of
+     * them. e.g. using a menu inside of an `md-dialog`.
+     *
+     * __NOTE__: Fixed menus will not scroll with the page and will be fixed to
+     * the window instead.
+     */
     fixed: boolean;
-    forceGroupSelection: boolean;
-    fullwidth: boolean;
-    flipMenuHorizontally: boolean;
-    stayOpenOnBodyClick: boolean;
+    /**
+     * Skips the opening and closing animations.
+     */
+    quick: boolean;
+    /**
+     * Displays overflow content like a submenu.
+     *
+     * __NOTE__: This may cause adverse effects if you set
+     * `md-menu {max-height:...}`
+     * and have items overflowing items in the "y" direction.
+     */
+    hasOverflow: boolean;
+    /**
+     * Opens the menu and makes it visible. Alternative to the `.show()` and
+     * `.close()` methods
+     */
+    open: boolean;
+    /**
+     * Offsets the menu's inline alignment from the anchor by the given number in
+     * pixels. This value is direction aware and will follow the LTR / RTL
+     * direction.
+     *
+     * e.g. LTR: positive -> right, negative -> left
+     *      RTL: positive -> left, negative -> right
+     */
+    xOffset: number;
+    /**
+     * Offsets the menu's block alignment from the anchor by the given number in
+     * pixels.
+     *
+     * e.g. positive -> down, negative -> up
+     */
+    yOffset: number;
+    /**
+     * The tabindex of the underlying list element.
+     */
+    listTabIndex: number;
+    /**
+     * The max time between the keystrokes of the typeahead menu behavior before
+     * it clears the typeahead buffer.
+     */
+    typeaheadBufferTime: number;
+    /**
+     * The corner of the anchor which to align the menu in the standard logical
+     * property style of <block>_<inline>.
+     */
+    anchorCorner: Corner;
+    /**
+     * The corner of the menu which to align the anchor in the standard logical
+     * property style of <block>_<inline>.
+     */
+    menuCorner: Corner;
+    /**
+     * Keeps the user clicks outside the menu
+     */
+    stayOpenOnOutsideClick: boolean;
+    /**
+     * After closing, does not restore focus to the last focused element before
+     * the menu was opened.
+     */
     skipRestoreFocus: boolean;
+    /**
+     * The element that should be focused by default once opened.
+     */
     defaultFocus: DefaultFocusState;
-    protected listUpdateComplete: null | Promise<unknown>;
-    protected get listElement(): List;
-    get items(): ListItem[];
+    protected openCloseAnimationSignal: import("../../motion/animation.js").AnimationSignal;
+    /**
+     * Whether the menu is animating upwards or downwards when opening. This is
+     * helpful for calculating some animation calculations.
+     */
+    protected get openDirection(): 'UP' | 'DOWN';
+    /**
+     * The element that was focused before the menu opened.
+     */
+    protected lastFocusedElement: HTMLElement | null;
+    /**
+     * Handles typeahead navigation through the menu.
+     */
+    protected typeaheadController: TypeaheadController;
+    /**
+     * Handles positioning the surface and aligning it to the anchor.
+     */
+    protected menuPositionController: SurfacePositionController;
+    /**
+     * The menu items associated with this menu. The items must be `MenuItem`s and
+     * have both the `md-menu-item` and `md-list-item` attributes.
+     */
+    get items(): MenuItem[];
     render(): import("lit-html").TemplateResult<1>;
-    protected getMenuItemTagName(): string;
-    protected createAdapter(): MDCMenuAdapter;
-    protected onKeydown(evt: KeyboardEvent): void;
-    protected onAction(evt: CustomEvent<ActionDetail>): void;
-    protected onOpened(): void;
-    protected onClosed(): void;
-    protected getUpdateComplete(): Promise<boolean>;
-    protected firstUpdated(): Promise<void>;
+    /**
+     * Renders the positionable surface element and its contents.
+     */
+    protected renderSurface(): import("lit-html").TemplateResult<1>;
+    /**
+     * Renders the List element and its items
+     */
+    protected renderList(): import("lit-html").TemplateResult<1>;
+    /**
+     * Renders the menu items' slot
+     */
+    protected renderMenuItems(): import("lit-html").TemplateResult<1>;
+    /**
+     * Renders the elevation component.
+     */
+    protected renderElevation(): import("lit-html").TemplateResult<1>;
+    /**
+     * Renders the focus ring component.
+     */
+    protected renderFocusRing(): import("lit-html").TemplateResult<1>;
+    protected getSurfaceClasses(): {
+        open: boolean;
+        fixed: boolean;
+        'has-overflow': boolean;
+    };
+    protected onListFocus(): void;
+    protected onListClick(): void;
+    protected onListBlur(): void;
+    /**
+     * Saves the last focused element focuses the new element based on
+     * `defaultFocus`, and animates open.
+     */
+    protected onOpened: () => void;
+    /**
+     * Animates closed.
+     */
+    protected beforeClose: () => Promise<void>;
+    /**
+     * Focuses the last focused element.
+     */
+    protected onClosed: () => void;
+    /**
+     * Performs the opening animation:
+     *
+     * https://direct.googleplex.com/#/spec/295000003+271060003
+     */
+    protected animateOpen(): void;
+    /**
+     * Performs the closing animation:
+     *
+     * https://direct.googleplex.com/#/spec/295000003+271060003
+     */
+    protected animateClose(): Promise<unknown>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected onWindowClick: (e: MouseEvent) => void;
+    protected onCloseMenu(e: Event): void;
+    protected onDeactivateItems(e: Event): void;
+    focus(): void;
     close(): void;
     show(): void;
 }
-export {};