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

package/menu/menu-item-link.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MenuItemLink } from './lib/menuitemlink/menu-item-link.js';
+export { ListItem } from '../list/lib/listitem/list-item.js';
+export { CloseMenuEvent, DeactivateItemsEvent, MenuItem } from './lib/shared.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-menu-item-link': MdMenuItemLink;
+    }
+}
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menu items are the selectable choices within the menu. Menu items must
+ * implement the `MenuItem` interface and also have the `md-menu-item`
+ * attribute. Additionally menu items are list items so they must also have the
+ * `md-list-item` attribute.
+ *
+ * Menu items can control a menu by selectively firing the `close-menu` and
+ * `deselect-items` events.
+ *
+ * This is a linkable variant.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdMenuItemLink extends MenuItemLink {
+    static styles: import("lit").CSSResult[];
+}

package/menu/menu-item-link.js

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { styles as listItemStyles } from '../list/lib/listitem/list-item-styles.css.js';
+import { styles as privateProps } from './lib/menuitem/menu-item-private-styles.css.js';
+import { styles } from './lib/menuitem/menu-item-styles.css.js';
+import { MenuItemLink } from './lib/menuitemlink/menu-item-link.js';
+export { CloseMenuEvent, DeactivateItemsEvent } from './lib/shared.js';
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menu items are the selectable choices within the menu. Menu items must
+ * implement the `MenuItem` interface and also have the `md-menu-item`
+ * attribute. Additionally menu items are list items so they must also have the
+ * `md-list-item` attribute.
+ *
+ * Menu items can control a menu by selectively firing the `close-menu` and
+ * `deselect-items` events.
+ *
+ * This is a linkable variant.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdMenuItemLink = class MdMenuItemLink extends MenuItemLink {
+};
+MdMenuItemLink.styles = [privateProps, listItemStyles, styles];
+MdMenuItemLink = __decorate([
+    customElement('md-menu-item-link')
+], MdMenuItemLink);
+export { MdMenuItemLink };
+//# sourceMappingURL=menu-item-link.js.map

package/menu/menu-item-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-link.js","sourceRoot":"","sources":["menu-item-link.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8CAA8C,CAAC;AAEtF,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,gDAAgD,CAAC;AACtF,OAAO,EAAC,MAAM,EAAC,MAAM,wCAAwC,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,sCAAsC,CAAC;AAGlE,OAAO,EAAC,cAAc,EAAE,oBAAoB,EAAW,MAAM,iBAAiB,CAAC;AAS/E;;;;;;;;;;;;;;;;GAgBG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,YAAY;;AAC9B,qBAAM,GAAG,CAAC,YAAY,EAAE,cAAc,EAAE,MAAM,CAAC,CAAC;AADrD,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CAE1B;SAFY,cAAc","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as listItemStyles} from '../list/lib/listitem/list-item-styles.css.js';\n\nimport {styles as privateProps} from './lib/menuitem/menu-item-private-styles.css.js';\nimport {styles} from './lib/menuitem/menu-item-styles.css.js';\nimport {MenuItemLink} from './lib/menuitemlink/menu-item-link.js';\n\nexport {ListItem} from '../list/lib/listitem/list-item.js';\nexport {CloseMenuEvent, DeactivateItemsEvent, MenuItem} from './lib/shared.js';\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu-item-link': MdMenuItemLink;\n  }\n}\n\n/**\n * @summary Menus display a list of choices on a temporary surface.\n *\n * @description\n * Menu items are the selectable choices within the menu. Menu items must\n * implement the `MenuItem` interface and also have the `md-menu-item`\n * attribute. Additionally menu items are list items so they must also have the\n * `md-list-item` attribute.\n *\n * Menu items can control a menu by selectively firing the `close-menu` and\n * `deselect-items` events.\n *\n * This is a linkable variant.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-menu-item-link')\nexport class MdMenuItemLink extends MenuItemLink {\n  static override styles = [privateProps, listItemStyles, styles];\n}\n"]}

package/menu/menu-item.d.ts

@@ -3,12 +3,29 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { MenuItem } from './lib/menuitem/menu-item.js';
+import { MenuItemEl } from './lib/menuitem/menu-item.js';
+export { ListItem } from '../list/lib/listitem/list-item.js';
+export { CloseMenuEvent, DeactivateItemsEvent, MenuItem } from './lib/shared.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-menu-item': MdMenuItem;
     }
 }
-export declare class MdMenuItem extends MenuItem {
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menu items are the selectable choices within the menu. Menu items must
+ * implement the `MenuItem` interface and also have the `md-menu-item`
+ * attribute. Additionally menu items are list items so they must also have the
+ * `md-list-item` attribute.
+ *
+ * Menu items can control a menu by selectively firing the `close-menu` and
+ * `deselect-items` events.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdMenuItem extends MenuItemEl {
     static styles: import("lit").CSSResult[];
 }

package/menu/menu-item.js

@@ -5,11 +5,29 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { styles } from '../list/lib/listitem/list-item-styles.css.js';
-import { MenuItem } from './lib/menuitem/menu-item.js';
-let MdMenuItem = class MdMenuItem extends MenuItem {
+import { styles as listItemStyles } from '../list/lib/listitem/list-item-styles.css.js';
+import { MenuItemEl } from './lib/menuitem/menu-item.js';
+import { styles as privateProps } from './lib/menuitem/menu-item-private-styles.css.js';
+import { styles } from './lib/menuitem/menu-item-styles.css.js';
+export { CloseMenuEvent, DeactivateItemsEvent } from './lib/shared.js';
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menu items are the selectable choices within the menu. Menu items must
+ * implement the `MenuItem` interface and also have the `md-menu-item`
+ * attribute. Additionally menu items are list items so they must also have the
+ * `md-list-item` attribute.
+ *
+ * Menu items can control a menu by selectively firing the `close-menu` and
+ * `deselect-items` events.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdMenuItem = class MdMenuItem extends MenuItemEl {
 };
-MdMenuItem.styles = [styles];
+MdMenuItem.styles = [privateProps, listItemStyles, styles];
 MdMenuItem = __decorate([
     customElement('md-menu-item')
 ], MdMenuItem);

package/menu/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["menu-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,8CAA8C,CAAC;AAEpE,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AASrD,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,QAAQ;CAEvC,CAAA;AADiB,iBAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AADvB,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAEtB;SAFY,UAAU","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles} from '../list/lib/listitem/list-item-styles.css.js';\n\nimport {MenuItem} from './lib/menuitem/menu-item.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu-item': MdMenuItem;\n  }\n}\n\n@customElement('md-menu-item')\nexport class MdMenuItem extends MenuItem {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["menu-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8CAA8C,CAAC;AAEtF,OAAO,EAAC,UAAU,EAAC,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,gDAAgD,CAAC;AACtF,OAAO,EAAC,MAAM,EAAC,MAAM,wCAAwC,CAAC;AAG9D,OAAO,EAAC,cAAc,EAAE,oBAAoB,EAAW,MAAM,iBAAiB,CAAC;AAQ/E;;;;;;;;;;;;;;GAcG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;;AACxB,iBAAM,GAAG,CAAC,YAAY,EAAE,cAAc,EAAE,MAAM,CAAC,CAAC;AADrD,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAEtB;SAFY,UAAU","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as listItemStyles} from '../list/lib/listitem/list-item-styles.css.js';\n\nimport {MenuItemEl} from './lib/menuitem/menu-item.js';\nimport {styles as privateProps} from './lib/menuitem/menu-item-private-styles.css.js';\nimport {styles} from './lib/menuitem/menu-item-styles.css.js';\n\nexport {ListItem} from '../list/lib/listitem/list-item.js';\nexport {CloseMenuEvent, DeactivateItemsEvent, MenuItem} from './lib/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu-item': MdMenuItem;\n  }\n}\n\n/**\n * @summary Menus display a list of choices on a temporary surface.\n *\n * @description\n * Menu items are the selectable choices within the menu. Menu items must\n * implement the `MenuItem` interface and also have the `md-menu-item`\n * attribute. Additionally menu items are list items so they must also have the\n * `md-list-item` attribute.\n *\n * Menu items can control a menu by selectively firing the `close-menu` and\n * `deselect-items` events.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-menu-item')\nexport class MdMenuItem extends MenuItemEl {\n  static override styles = [privateProps, listItemStyles, styles];\n}\n"]}

package/menu/menu.d.ts

@@ -4,11 +4,56 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Menu } from './lib/menu.js';
+export { ListItem } from '../list/lib/listitem/list-item.js';
+export { Corner, DefaultFocusState } from './lib/menu.js';
+export { CloseMenuEvent, DeactivateItemsEvent, MenuItem } from './lib/shared.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-menu': MdMenu;
     }
 }
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menus appear when users interact with a button, action, or other control.
+ *
+ * They can be opened from a variety of elements, most commonly icon buttons,
+ * buttons, and text fields.
+ *
+ * md-menu listens for the `close-menu` and `deselect-items` events.
+ *
+ * - `close-menu` closes the menu when dispatched from a child element.
+ * - `deselect-items` deselects all of its immediate menu-item children.
+ *
+ * @example
+ * ```html
+ * <div style="position:relative;">
+ *   <button
+ *       class="anchor"
+ *       ${ref(anchorRef)}
+ *       @click=${() => this.menuRef.value.show()}>
+ *     Click to open menu
+ *   </button>
+ *   <!--
+ *     `has-overflow` is required when using a submenu which overflows the
+ *     menu's contents
+ *   -->
+ *   <md-menu has-overflow ${ref(menuRef)} ${(el) => el.anchor =
+ * anchorRef.value}> <md-menu-item header="This is a header"></md-menu-item>
+ *     <md-sub-menu-item header="this is a submenu item">
+ *       <md-menu slot="submenu">
+ *         <md-menu-item
+ *           header="This is an item inside a submenu"></md-menu-item>
+ *       </md-menu>
+ *     </md-sub-menu>
+ *   </md-menu>
+ * </div>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
 export declare class MdMenu extends Menu {
     static styles: import("lit").CSSResult[];
 }

package/menu/menu.js

@@ -7,6 +7,49 @@ import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
 import { Menu } from './lib/menu.js';
 import { styles } from './lib/menu-styles.css.js';
+export { CloseMenuEvent, DeactivateItemsEvent } from './lib/shared.js';
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menus appear when users interact with a button, action, or other control.
+ *
+ * They can be opened from a variety of elements, most commonly icon buttons,
+ * buttons, and text fields.
+ *
+ * md-menu listens for the `close-menu` and `deselect-items` events.
+ *
+ * - `close-menu` closes the menu when dispatched from a child element.
+ * - `deselect-items` deselects all of its immediate menu-item children.
+ *
+ * @example
+ * ```html
+ * <div style="position:relative;">
+ *   <button
+ *       class="anchor"
+ *       ${ref(anchorRef)}
+ *       @click=${() => this.menuRef.value.show()}>
+ *     Click to open menu
+ *   </button>
+ *   <!--
+ *     `has-overflow` is required when using a submenu which overflows the
+ *     menu's contents
+ *   -->
+ *   <md-menu has-overflow ${ref(menuRef)} ${(el) => el.anchor =
+ * anchorRef.value}> <md-menu-item header="This is a header"></md-menu-item>
+ *     <md-sub-menu-item header="this is a submenu item">
+ *       <md-menu slot="submenu">
+ *         <md-menu-item
+ *           header="This is an item inside a submenu"></md-menu-item>
+ *       </md-menu>
+ *     </md-sub-menu>
+ *   </md-menu>
+ * </div>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
 let MdMenu = class MdMenu extends Menu {
 };
 MdMenu.styles = [styles];

package/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sourceRoot":"","sources":["menu.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AACnC,OAAO,EAAC,MAAM,EAAC,MAAM,0BAA0B,CAAC;AAShD,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,IAAI;CAE/B,CAAA;AADiB,aAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AADvB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAElB;SAFY,MAAM","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Menu} from './lib/menu.js';\nimport {styles} from './lib/menu-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu': MdMenu;\n  }\n}\n\n@customElement('md-menu')\nexport class MdMenu extends Menu {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["menu.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AACnC,OAAO,EAAC,MAAM,EAAC,MAAM,0BAA0B,CAAC;AAIhD,OAAO,EAAC,cAAc,EAAE,oBAAoB,EAAW,MAAM,iBAAiB,CAAC;AAQ/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,IAAI;;AACd,aAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAElB;SAFY,MAAM","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Menu} from './lib/menu.js';\nimport {styles} from './lib/menu-styles.css.js';\n\nexport {ListItem} from '../list/lib/listitem/list-item.js';\nexport {Corner, DefaultFocusState} from './lib/menu.js';\nexport {CloseMenuEvent, DeactivateItemsEvent, MenuItem} from './lib/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu': MdMenu;\n  }\n}\n\n/**\n * @summary Menus display a list of choices on a temporary surface.\n *\n * @description\n * Menus appear when users interact with a button, action, or other control.\n *\n * They can be opened from a variety of elements, most commonly icon buttons,\n * buttons, and text fields.\n *\n * md-menu listens for the `close-menu` and `deselect-items` events.\n *\n * - `close-menu` closes the menu when dispatched from a child element.\n * - `deselect-items` deselects all of its immediate menu-item children.\n *\n * @example\n * ```html\n * <div style=\"position:relative;\">\n *   <button\n *       class=\"anchor\"\n *       ${ref(anchorRef)}\n *       @click=${() => this.menuRef.value.show()}>\n *     Click to open menu\n *   </button>\n *   <!--\n *     `has-overflow` is required when using a submenu which overflows the\n *     menu's contents\n *   -->\n *   <md-menu has-overflow ${ref(menuRef)} ${(el) => el.anchor =\n * anchorRef.value}> <md-menu-item header=\"This is a header\"></md-menu-item>\n *     <md-sub-menu-item header=\"this is a submenu item\">\n *       <md-menu slot=\"submenu\">\n *         <md-menu-item\n *           header=\"This is an item inside a submenu\"></md-menu-item>\n *       </md-menu>\n *     </md-sub-menu>\n *   </md-menu>\n * </div>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-menu')\nexport class MdMenu extends Menu {\n  static override styles = [styles];\n}\n"]}

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

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { SubMenuItem } from './lib/submenuitem/sub-menu-item.js';
+export { ListItem } from '../list/lib/listitem/list-item.js';
+export { CloseMenuEvent, DeactivateItemsEvent, MenuItem } from './lib/shared.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-sub-menu-item': MdSubMenuItem;
+    }
+}
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menu items are the selectable choices within the menu. Menu items must
+ * implement the `MenuItem` interface and also have the `md-menu-item`
+ * attribute. Additionally menu items are list items so they must also have the
+ * `md-list-item` attribute.
+ *
+ * Menu items can control a menu by selectively firing the `close-menu` and
+ * `deselect-items` events.
+ *
+ * This menu item will open a sub-menu that is slotted in the `submenu` slot.
+ * Additionally, the containing menu must either have `has-overflow` or `fixed`
+ * set to `true` in order to display the containing menu properly.
+ *
+ * @example
+ * ```html
+ * <div style="position:relative;">
+ *   <button
+ *       class="anchor"
+ *       ${ref(anchorRef)}
+ *       @click=${() => this.menuRef.value.show()}>
+ *     Click to open menu
+ *   </button>
+ *   <!--
+ *     `has-overflow` is required when using a submenu which overflows the
+ *     menu's contents
+ *   -->
+ *   <md-menu has-overflow ${ref(menuRef)} ${(el) => el.anchor =
+ * anchorRef.value}> <md-menu-item header="This is a header"></md-menu-item>
+ *     <md-sub-menu-item header="this is a submenu item">
+ *       <md-menu slot="submenu">
+ *         <md-menu-item
+ *           header="This is an item inside a submenu"></md-menu-item>
+ *       </md-menu>
+ *     </md-sub-menu>
+ *   </md-menu>
+ * </div>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdSubMenuItem extends SubMenuItem {
+    static styles: import("lit").CSSResult[];
+}

package/menu/sub-menu-item.js

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { styles as listItemStyles } from '../list/lib/listitem/list-item-styles.css.js';
+import { styles as privateProps } from './lib/menuitem/menu-item-private-styles.css.js';
+import { styles } from './lib/menuitem/menu-item-styles.css.js';
+import { SubMenuItem } from './lib/submenuitem/sub-menu-item.js';
+export { CloseMenuEvent, DeactivateItemsEvent } from './lib/shared.js';
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menu items are the selectable choices within the menu. Menu items must
+ * implement the `MenuItem` interface and also have the `md-menu-item`
+ * attribute. Additionally menu items are list items so they must also have the
+ * `md-list-item` attribute.
+ *
+ * Menu items can control a menu by selectively firing the `close-menu` and
+ * `deselect-items` events.
+ *
+ * This menu item will open a sub-menu that is slotted in the `submenu` slot.
+ * Additionally, the containing menu must either have `has-overflow` or `fixed`
+ * set to `true` in order to display the containing menu properly.
+ *
+ * @example
+ * ```html
+ * <div style="position:relative;">
+ *   <button
+ *       class="anchor"
+ *       ${ref(anchorRef)}
+ *       @click=${() => this.menuRef.value.show()}>
+ *     Click to open menu
+ *   </button>
+ *   <!--
+ *     `has-overflow` is required when using a submenu which overflows the
+ *     menu's contents
+ *   -->
+ *   <md-menu has-overflow ${ref(menuRef)} ${(el) => el.anchor =
+ * anchorRef.value}> <md-menu-item header="This is a header"></md-menu-item>
+ *     <md-sub-menu-item header="this is a submenu item">
+ *       <md-menu slot="submenu">
+ *         <md-menu-item
+ *           header="This is an item inside a submenu"></md-menu-item>
+ *       </md-menu>
+ *     </md-sub-menu>
+ *   </md-menu>
+ * </div>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdSubMenuItem = class MdSubMenuItem extends SubMenuItem {
+};
+MdSubMenuItem.styles = [privateProps, listItemStyles, styles];
+MdSubMenuItem = __decorate([
+    customElement('md-sub-menu-item')
+], MdSubMenuItem);
+export { MdSubMenuItem };
+//# sourceMappingURL=sub-menu-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sub-menu-item.js","sourceRoot":"","sources":["sub-menu-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8CAA8C,CAAC;AAEtF,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,gDAAgD,CAAC;AACtF,OAAO,EAAC,MAAM,EAAC,MAAM,wCAAwC,CAAC;AAC9D,OAAO,EAAC,WAAW,EAAC,MAAM,oCAAoC,CAAC;AAG/D,OAAO,EAAC,cAAc,EAAE,oBAAoB,EAAW,MAAM,iBAAiB,CAAC;AAQ/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;;AAC5B,oBAAM,GAAG,CAAC,YAAY,EAAE,cAAc,EAAE,MAAM,CAAC,CAAC;AADrD,aAAa;IADzB,aAAa,CAAC,kBAAkB,CAAC;GACrB,aAAa,CAEzB;SAFY,aAAa","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as listItemStyles} from '../list/lib/listitem/list-item-styles.css.js';\n\nimport {styles as privateProps} from './lib/menuitem/menu-item-private-styles.css.js';\nimport {styles} from './lib/menuitem/menu-item-styles.css.js';\nimport {SubMenuItem} from './lib/submenuitem/sub-menu-item.js';\n\nexport {ListItem} from '../list/lib/listitem/list-item.js';\nexport {CloseMenuEvent, DeactivateItemsEvent, MenuItem} from './lib/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-sub-menu-item': MdSubMenuItem;\n  }\n}\n\n/**\n * @summary Menus display a list of choices on a temporary surface.\n *\n * @description\n * Menu items are the selectable choices within the menu. Menu items must\n * implement the `MenuItem` interface and also have the `md-menu-item`\n * attribute. Additionally menu items are list items so they must also have the\n * `md-list-item` attribute.\n *\n * Menu items can control a menu by selectively firing the `close-menu` and\n * `deselect-items` events.\n *\n * This menu item will open a sub-menu that is slotted in the `submenu` slot.\n * Additionally, the containing menu must either have `has-overflow` or `fixed`\n * set to `true` in order to display the containing menu properly.\n *\n * @example\n * ```html\n * <div style=\"position:relative;\">\n *   <button\n *       class=\"anchor\"\n *       ${ref(anchorRef)}\n *       @click=${() => this.menuRef.value.show()}>\n *     Click to open menu\n *   </button>\n *   <!--\n *     `has-overflow` is required when using a submenu which overflows the\n *     menu's contents\n *   -->\n *   <md-menu has-overflow ${ref(menuRef)} ${(el) => el.anchor =\n * anchorRef.value}> <md-menu-item header=\"This is a header\"></md-menu-item>\n *     <md-sub-menu-item header=\"this is a submenu item\">\n *       <md-menu slot=\"submenu\">\n *         <md-menu-item\n *           header=\"This is an item inside a submenu\"></md-menu-item>\n *       </md-menu>\n *     </md-sub-menu>\n *   </md-menu>\n * </div>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-sub-menu-item')\nexport class MdSubMenuItem extends SubMenuItem {\n  static override styles = [privateProps, listItemStyles, styles];\n}\n"]}

package/menusurface/lib/_md-comp-menu-surface.scss

@@ -3,9 +3,13 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
 @use '../../elevation/lib/elevation';
 @use '../../tokens';
+// go/keep-sorted end
 
 $_default-deps: (
   md-sys-color: tokens.md-sys-color-values-light(),

package/menusurface/lib/_menu-surface.scss

@@ -6,10 +6,14 @@
 // 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/lib/elevation';
 @use '../../sass/theme';
 @use './md-comp-menu-surface';
+// go/keep-sorted end
 
 $_custom-property-prefix: 'menu-surface';
 $_fade-in-duration: 0.03s;
@@ -63,7 +67,7 @@ $_deceleration-curve-timing-function: cubic-bezier(0, 0, 0.2, 1) !default;
       (
         level: var(--_container-elevation),
         shadow-color: var(--_container-shadow-color),
-        surface-tint-color: var(--_container-surface-tint-layer-color),
+        surface-tint: var(--_container-surface-tint-layer-color),
       )
     );
 

package/menusurface/lib/foundation.js

@@ -5,37 +5,6 @@
  */
 import { Corner, CornerBit, cssClasses, numbers, strings } from './constants.js';
 export class MDCMenuSurfaceFoundation {
-    constructor(adapter) {
-        this.isSurfaceOpen = false;
-        this.isQuickOpen = false;
-        this.isHoistedElement = false;
-        this.isFixedPosition = false;
-        this.isHorizontallyCenteredOnViewport = false;
-        this.maxHeight = 0;
-        this.openBottomBias = 0;
-        this.openAnimationEndTimerId = 0;
-        this.closeAnimationEndTimerId = 0;
-        this.animationRequestId = 0;
-        this.anchorCorner = Corner.TOP_START;
-        /**
-         * Corner of the menu surface to which menu surface is attached to anchor.
-         *
-         *  Anchor corner --->+----------+
-         *                    |  ANCHOR  |
-         *                    +----------+
-         *  Origin corner --->+--------------+
-         *                    |              |
-         *                    |              |
-         *                    | MENU SURFACE |
-         *                    |              |
-         *                    |              |
-         *                    +--------------+
-         */
-        this.originCorner = Corner.TOP_START;
-        this.anchorMargin = { top: 0, right: 0, bottom: 0, left: 0 };
-        this.position = { x: 0, y: 0 };
-        this.adapter = { ...MDCMenuSurfaceFoundation.defaultAdapter, ...adapter };
-    }
     static get cssClasses() {
         return cssClasses;
     }
@@ -78,6 +47,37 @@ export class MDCMenuSurfaceFoundation {
         };
         // tslint:enable:object-literal-sort-keys
     }
+    constructor(adapter) {
+        this.isSurfaceOpen = false;
+        this.isQuickOpen = false;
+        this.isHoistedElement = false;
+        this.isFixedPosition = false;
+        this.isHorizontallyCenteredOnViewport = false;
+        this.maxHeight = 0;
+        this.openBottomBias = 0;
+        this.openAnimationEndTimerId = 0;
+        this.closeAnimationEndTimerId = 0;
+        this.animationRequestId = 0;
+        this.anchorCorner = Corner.TOP_START;
+        /**
+         * Corner of the menu surface to which menu surface is attached to anchor.
+         *
+         *  Anchor corner --->+----------+
+         *                    |  ANCHOR  |
+         *                    +----------+
+         *  Origin corner --->+--------------+
+         *                    |              |
+         *                    |              |
+         *                    | MENU SURFACE |
+         *                    |              |
+         *                    |              |
+         *                    +--------------+
+         */
+        this.originCorner = Corner.TOP_START;
+        this.anchorMargin = { top: 0, right: 0, bottom: 0, left: 0 };
+        this.position = { x: 0, y: 0 };
+        this.adapter = { ...MDCMenuSurfaceFoundation.defaultAdapter, ...adapter };
+    }
     init() {
         const { ROOT, OPEN } = MDCMenuSurfaceFoundation.cssClasses;
         if (!this.adapter.hasClass(ROOT)) {