@material/web 1.0.0-pre.8 → 1.0.0

package/list/list-item.d.ts

@@ -3,7 +3,8 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { ListItemEl as ListItem } from './lib/listitem/list-item.js';
+import { ListItemEl as ListItem } from './internal/listitem/list-item.js';
+export { ListItemType } from './internal/listitem/list-item.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-list-item': MdListItem;
@@ -27,20 +28,26 @@ declare global {
  *   item in a collection and act on it.
  * - Lists should present icons, text, and actions in a consistent format.
  *
- * Acceptable slottable child variants are:
+ * Acceptable slot child variants are:
  *
- * - `video[data-variant=video]`
- * - `img,span[data-variant=avatar]`
- * - `img[data-variant=image]`
- * - `md-icon[data-variant=icon]`
+ * - `video[slot=start-video]`
+ * - `video[slot=start-video-large]`
+ * - `img,span[slot=start-avatar]`
+ * - `img[slot=start-image]`
+ * - `md-icon[slot=start-icon]`
+ * - `svg[slot=start-icon]`
+ * - `img[slot=start-icon]`
+ * - `md-icon[slot=end-icon]`
+ * - `svg[slot=end-icon]`
+ * - `img[slot=end-icon]`
  *
  *  @example
  * ```html
  * <md-list-item
  *     headline="User Name"
  *     supportingText="user@name.com">
- *   <md-icon data-variant="icon" slot="start">account_circle</md-icon>
- *   <md-icon data-variant="icon" slot="end">check</md-icon>
+ *   <md-icon slot="start-icon">account_circle</md-icon>
+ *   <md-icon slot="end-icon">check</md-icon>
  * </md-list-item>
  * ```
  *

package/list/list-item.js

@@ -5,9 +5,9 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { styles as forcedColors } from './lib/listitem/forced-colors-styles.css.js';
-import { ListItemEl as ListItem } from './lib/listitem/list-item.js';
-import { styles } from './lib/listitem/list-item-styles.css.js';
+import { styles as forcedColors } from './internal/listitem/forced-colors-styles.css.js';
+import { ListItemEl as ListItem } from './internal/listitem/list-item.js';
+import { styles } from './internal/listitem/list-item-styles.css.js';
 /**
  * @summary
  * Lists are continuous, vertical indexes of text or images. Items are placed
@@ -26,20 +26,26 @@ import { styles } from './lib/listitem/list-item-styles.css.js';
  *   item in a collection and act on it.
  * - Lists should present icons, text, and actions in a consistent format.
  *
- * Acceptable slottable child variants are:
+ * Acceptable slot child variants are:
  *
- * - `video[data-variant=video]`
- * - `img,span[data-variant=avatar]`
- * - `img[data-variant=image]`
- * - `md-icon[data-variant=icon]`
+ * - `video[slot=start-video]`
+ * - `video[slot=start-video-large]`
+ * - `img,span[slot=start-avatar]`
+ * - `img[slot=start-image]`
+ * - `md-icon[slot=start-icon]`
+ * - `svg[slot=start-icon]`
+ * - `img[slot=start-icon]`
+ * - `md-icon[slot=end-icon]`
+ * - `svg[slot=end-icon]`
+ * - `img[slot=end-icon]`
  *
  *  @example
  * ```html
  * <md-list-item
  *     headline="User Name"
  *     supportingText="user@name.com">
- *   <md-icon data-variant="icon" slot="start">account_circle</md-icon>
- *   <md-icon data-variant="icon" slot="end">check</md-icon>
+ *   <md-icon slot="start-icon">account_circle</md-icon>
+ *   <md-icon slot="end-icon">check</md-icon>
  * </md-list-item>
  * ```
  *
@@ -48,11 +54,10 @@ import { styles } from './lib/listitem/list-item-styles.css.js';
  * @final
  * @suppress {visibility}
  */
-let MdListItem = class MdListItem extends ListItem {
+export let MdListItem = class MdListItem extends ListItem {
 };
 MdListItem.styles = [styles, forcedColors];
 MdListItem = __decorate([
     customElement('md-list-item')
 ], MdListItem);
-export { MdListItem };
 //# sourceMappingURL=list-item.js.map

package/list/list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.js","sourceRoot":"","sources":["list-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4CAA4C,CAAC;AAClF,OAAO,EAAC,UAAU,IAAI,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAC,MAAM,EAAC,MAAM,wCAAwC,CAAC;AAQ9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ;;AACtB,iBAAM,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AADrC,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 forcedColors} from './lib/listitem/forced-colors-styles.css.js';\nimport {ListItemEl as ListItem} from './lib/listitem/list-item.js';\nimport {styles} from './lib/listitem/list-item-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list-item': MdListItem;\n  }\n}\n\n/**\n * @summary\n * Lists are continuous, vertical indexes of text or images. Items are placed\n * inside the list.\n *\n * @description\n * Lists consist of one or more list items, and can contain actions represented\n * by icons and text. List items come in three sizes: one-line, two-line, and\n * three-line.\n *\n * __Takeaways:__\n *\n * - Lists should be sorted in logical ways that make content easy to scan, such\n *   as alphabetical, numerical, chronological, or by user preference.\n * - Lists present content in a way that makes it easy to identify a specific\n *   item in a collection and act on it.\n * - Lists should present icons, text, and actions in a consistent format.\n *\n * Acceptable slottable child variants are:\n *\n * - `video[data-variant=video]`\n * - `img,span[data-variant=avatar]`\n * - `img[data-variant=image]`\n * - `md-icon[data-variant=icon]`\n *\n *  @example\n * ```html\n * <md-list-item\n *     headline=\"User Name\"\n *     supportingText=\"user@name.com\">\n *   <md-icon data-variant=\"icon\" slot=\"start\">account_circle</md-icon>\n *   <md-icon data-variant=\"icon\" slot=\"end\">check</md-icon>\n * </md-list-item>\n * ```\n *\n * @example\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list-item')\nexport class MdListItem extends ListItem {\n  static override styles = [styles, forcedColors];\n}\n"]}
+{"version":3,"file":"list-item.js","sourceRoot":"","sources":["list-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iDAAiD,CAAC;AACvF,OAAO,EAAC,UAAU,IAAI,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,MAAM,EAAC,MAAM,6CAA6C,CAAC;AAUnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEI,WAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ;;AACtB,iBAAM,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,AAAzB,CAA0B;AADrC,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAEtB","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 forcedColors} from './internal/listitem/forced-colors-styles.css.js';\nimport {ListItemEl as ListItem} from './internal/listitem/list-item.js';\nimport {styles} from './internal/listitem/list-item-styles.css.js';\n\nexport {ListItemType} from './internal/listitem/list-item.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list-item': MdListItem;\n  }\n}\n\n/**\n * @summary\n * Lists are continuous, vertical indexes of text or images. Items are placed\n * inside the list.\n *\n * @description\n * Lists consist of one or more list items, and can contain actions represented\n * by icons and text. List items come in three sizes: one-line, two-line, and\n * three-line.\n *\n * __Takeaways:__\n *\n * - Lists should be sorted in logical ways that make content easy to scan, such\n *   as alphabetical, numerical, chronological, or by user preference.\n * - Lists present content in a way that makes it easy to identify a specific\n *   item in a collection and act on it.\n * - Lists should present icons, text, and actions in a consistent format.\n *\n * Acceptable slot child variants are:\n *\n * - `video[slot=start-video]`\n * - `video[slot=start-video-large]`\n * - `img,span[slot=start-avatar]`\n * - `img[slot=start-image]`\n * - `md-icon[slot=start-icon]`\n * - `svg[slot=start-icon]`\n * - `img[slot=start-icon]`\n * - `md-icon[slot=end-icon]`\n * - `svg[slot=end-icon]`\n * - `img[slot=end-icon]`\n *\n *  @example\n * ```html\n * <md-list-item\n *     headline=\"User Name\"\n *     supportingText=\"user@name.com\">\n *   <md-icon slot=\"start-icon\">account_circle</md-icon>\n *   <md-icon slot=\"end-icon\">check</md-icon>\n * </md-list-item>\n * ```\n *\n * @example\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list-item')\nexport class MdListItem extends ListItem {\n  static override styles = [styles, forcedColors];\n}\n"]}

package/list/list.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { List } from './lib/list.js';
+import { List } from './internal/list.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-list': MdList;

package/list/list.js

@@ -5,8 +5,8 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { List } from './lib/list.js';
-import { styles } from './lib/list-styles.css.js';
+import { List } from './internal/list.js';
+import { styles } from './internal/list-styles.css.js';
 /**
  * @summary Lists are continuous, vertical indexes of text or images.
  *
@@ -26,11 +26,10 @@ import { styles } from './lib/list-styles.css.js';
  * @final
  * @suppress {visibility}
  */
-let MdList = class MdList extends List {
+export let MdList = class MdList extends List {
 };
 MdList.styles = [styles];
 MdList = __decorate([
     customElement('md-list')
 ], MdList);
-export { MdList };
 //# sourceMappingURL=list.js.map

package/list/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sourceRoot":"","sources":["list.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;AAQhD;;;;;;;;;;;;;;;;;;GAkBG;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 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {List} from './lib/list.js';\nimport {styles} from './lib/list-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list': MdList;\n  }\n}\n\n/**\n * @summary Lists are continuous, vertical indexes of text or images.\n *\n * @description\n * Lists consist of one or more list items, and can contain actions represented\n * by icons and text. List items come in three sizes: one-line, two-line, and\n * three-line.\n *\n * __Takeaways:__\n *\n * - Lists should be sorted in logical ways that make content easy to scan, such\n *   as alphabetical, numerical, chronological, or by user preference.\n * - Lists present content in a way that makes it easy to identify a specific\n *   item in a collection and act on it.\n * - Lists should present icons, text, and actions in a consistent format.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list')\nexport class MdList extends List {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"list.js","sourceRoot":"","sources":["list.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,MAAM,EAAC,MAAM,+BAA+B,CAAC;AAQrD;;;;;;;;;;;;;;;;;;GAkBG;AAEI,WAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,IAAI;;AACd,aAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AADvB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAElB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {List} from './internal/list.js';\nimport {styles} from './internal/list-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list': MdList;\n  }\n}\n\n/**\n * @summary Lists are continuous, vertical indexes of text or images.\n *\n * @description\n * Lists consist of one or more list items, and can contain actions represented\n * by icons and text. List items come in three sizes: one-line, two-line, and\n * three-line.\n *\n * __Takeaways:__\n *\n * - Lists should be sorted in logical ways that make content easy to scan, such\n *   as alphabetical, numerical, chronological, or by user preference.\n * - Lists present content in a way that makes it easy to identify a specific\n *   item in a collection and act on it.\n * - Lists should present icons, text, and actions in a consistent format.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list')\nexport class MdList extends List {\n  static override styles = [styles];\n}\n"]}

package/menu/_menu-item.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/menuitem/menu-item' show theme;
+@forward './internal/menuitem/menu-item' show theme;

package/menu/_menu.scss

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

package/menu/harness.d.ts

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { Menu } from './lib/menu.js';
-import { MenuItemHarness } from './lib/menuitem/harness.js';
-export { MenuItemHarness } from './lib/menuitem/harness.js';
+import { Menu } from './internal/menu.js';
+import { MenuItemHarness } from './internal/menuitem/harness.js';
+export { MenuItemHarness } from './internal/menuitem/harness.js';
 /**
  * Test harness for menu.
  */
@@ -14,8 +14,8 @@ export declare class MenuHarness extends Harness<Menu> {
     /**
      * Shows the menu and returns the first list item element.
      */
-    protected getInteractiveElement(): Promise<HTMLElement>;
+    protected getInteractiveElement(): Promise<Menu>;
     /** @return ListItem harnesses for the menu's items. */
     getItems(): MenuItemHarness[];
-    show(quick?: boolean): Promise<void>;
+    show(): Promise<void>;
 }

package/menu/harness.js

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { MenuItemHarness } from './lib/menuitem/harness.js';
-export { MenuItemHarness } from './lib/menuitem/harness.js';
+import { MenuItemHarness } from './internal/menuitem/harness.js';
+export { MenuItemHarness } from './internal/menuitem/harness.js';
 /**
  * Test harness for menu.
  */
@@ -15,16 +15,14 @@ export class MenuHarness extends Harness {
      */
     async getInteractiveElement() {
         await this.element.updateComplete;
-        await this.show();
-        return (await this.getItems())[0].getInteractiveElement();
+        return this.element;
     }
     /** @return ListItem harnesses for the menu's items. */
     getItems() {
         return this.element.items.map((item) => new MenuItemHarness(item));
     }
-    async show(quick = true) {
+    async show() {
         const menu = this.element;
-        menu.quick = quick;
         if (menu.open) {
             return;
         }

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,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"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAG9C,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE/D,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE/D;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAa;IAC5C;;OAEG;IACgB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAe,CAAC;IAC9B,CAAC;IAED,uDAAuD;IACvD,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CACzB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,eAAe,CAAC,IAA8B,CAAC,CAAC,CAAC;IACrE,CAAC;IAED,KAAK,CAAC,IAAI;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;QAC1B,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 {LitElement} from 'lit';\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Menu} from './internal/menu.js';\nimport {MenuItemHarness} from './internal/menuitem/harness.js';\n\nexport {MenuItemHarness} from './internal/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    return this.element as Menu;\n  }\n\n  /** @return ListItem harnesses for the menu's items. */\n  getItems() {\n    return this.element.items.map(\n        (item) => new MenuItemHarness(item as typeof item&LitElement));\n  }\n\n  async show() {\n    const menu = this.element;\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/internal/_menu.scss

@@ -0,0 +1,124 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:string';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../elevation/elevation';
+@use '../../focus/focus-ring';
+@use '../../list/list' as md-list;
+@use '../../list/list-item';
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-menu-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-menu-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-menu-values();
+  @each $token, $value in $tokens {
+    $tokens: map.set($tokens, $token, var(--md-menu-#{$token}, #{$value}));
+  }
+
+  :host {
+    @include elevation.theme(
+      (
+        'level': map.get($tokens, 'container-elevation'),
+        'shadow-color': map.get($tokens, 'container-shadow-color'),
+      )
+    );
+
+    min-width: 112px;
+    color: unset;
+    display: contents;
+  }
+
+  md-focus-ring {
+    @include focus-ring.theme(
+      (
+        'shape': map.get($tokens, 'container-shape'),
+      )
+    );
+  }
+
+  .menu {
+    border-radius: map.get($tokens, 'container-shape');
+    display: none;
+    opacity: 0;
+    z-index: 20;
+    position: absolute;
+    user-select: none;
+    max-height: inherit;
+    height: inherit;
+    min-width: inherit;
+    max-width: inherit;
+  }
+
+  .fixed {
+    position: fixed;
+  }
+
+  .items {
+    display: block;
+    list-style-type: none;
+    margin: 0;
+    outline: none;
+    box-sizing: border-box;
+    background-color: map.get($tokens, 'container-color');
+    height: inherit;
+    max-height: inherit;
+    overflow: auto;
+    min-width: inherit;
+    max-width: inherit;
+    border-radius: inherit;
+  }
+
+  .item-padding {
+    padding-block: 8px;
+  }
+
+  .has-overflow .items {
+    overflow: visible;
+  }
+
+  .animating .items {
+    overflow: hidden;
+  }
+
+  .has-overflow.animating .items {
+    // Often has-overlow is set because there are submenus. Since we need
+    // overflow to be hidden to make the animation work, we need to disable
+    // submenus opening mid-animation or else it looks completely wrong.
+    pointer-events: none;
+  }
+
+  .animating ::slotted(.md-menu-hidden) {
+    opacity: 0;
+  }
+
+  slot {
+    display: block;
+    height: inherit;
+    max-height: inherit;
+  }
+
+  ::slotted(:is(md-divider, [role='separator'])) {
+    margin: 8px 0;
+  }
+}

package/menu/internal/controllers/menuItemController.d.ts

@@ -0,0 +1,107 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Interface specific to menu item and not HTMLElement.
+ *
+ * NOTE: required properties are expected to be reactive.
+ */
+interface MenuItemAdditions {
+    /**
+     * Whether or not the item is in the disabled state.
+     */
+    disabled: boolean;
+    /**
+     * The text of the item that will be used for typeahead. If not set, defaults
+     * to the textContent of the element slotted into the headline.
+     */
+    typeaheadText: string;
+    /**
+     * Whether or not the item is in the selected visual state.
+     */
+    selected: boolean;
+    /**
+     * Sets the behavior and role of the menu item, defaults to "menuitem".
+     */
+    type: MenuItemType;
+    /**
+     * Whether it should keep the menu open after click.
+     */
+    keepOpen?: boolean;
+    /**
+     * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.
+     */
+    href?: string;
+    /**
+     * Focuses the item.
+     */
+    focus: () => void;
+}
+/**
+ * The interface of every menu item interactive with a menu. All menu items
+ * should implement this interface to be compatible with md-menu. Additionally
+ * it should have the `md-menu-item` attribute set.
+ *
+ * NOTE, the required properties are recommended to be reactive properties.
+ */
+export type MenuItem = MenuItemAdditions & HTMLElement;
+/**
+ * Supported behaviors for a menu item.
+ */
+export type MenuItemType = 'menuitem' | 'option' | 'button' | 'link';
+/**
+ * The options used to inialize MenuItemController.
+ */
+export interface MenuItemControllerConfig {
+    /**
+     * A function that returns the headline element of the menu item.
+     */
+    getHeadlineElements: () => HTMLElement[];
+}
+/**
+ * A controller that provides most functionality of an element that implements
+ * the MenuItem interface.
+ */
+export declare class MenuItemController implements ReactiveController {
+    private readonly host;
+    private internalTypeaheadText;
+    private readonly getHeadlineElements;
+    /**
+     * @param host The MenuItem in which to attach this controller to.
+     * @param config The object that configures this controller's behavior.
+     */
+    constructor(host: ReactiveControllerHost & MenuItem, config: MenuItemControllerConfig);
+    /**
+     * The text that is selectable via typeahead. If not set, defaults to the
+     * innerText of the item slotted into the `"headline"` slot.
+     */
+    get typeaheadText(): string;
+    /**
+     * The recommended tag name to render as the list item.
+     */
+    get tagName(): "button" | "a" | "li";
+    /**
+     * The recommended role of the menu item.
+     */
+    get role(): "menuitem" | "option";
+    hostConnected(): void;
+    hostUpdate(): void;
+    /**
+     * Bind this click listener to the interactive element. Handles closing the
+     * menu.
+     */
+    onClick: () => void;
+    /**
+     * Bind this click listener to the interactive element. Handles closing the
+     * menu.
+     */
+    onKeydown: (event: KeyboardEvent) => void;
+    /**
+     * Use to set the typeaheadText when it changes.
+     */
+    setTypeaheadText(text: string): void;
+}
+export {};

package/menu/internal/controllers/menuItemController.js

@@ -0,0 +1,99 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CloseReason, createDefaultCloseMenuEvent, isClosableKey } from './shared.js';
+/**
+ * A controller that provides most functionality of an element that implements
+ * the MenuItem interface.
+ */
+export class MenuItemController {
+    /**
+     * @param host The MenuItem in which to attach this controller to.
+     * @param config The object that configures this controller's behavior.
+     */
+    constructor(host, config) {
+        this.host = host;
+        this.internalTypeaheadText = null;
+        /**
+         * Bind this click listener to the interactive element. Handles closing the
+         * menu.
+         */
+        this.onClick = () => {
+            if (this.host.keepOpen)
+                return;
+            this.host.dispatchEvent(createDefaultCloseMenuEvent(this.host, { kind: CloseReason.CLICK_SELECTION }));
+        };
+        /**
+         * Bind this click listener to the interactive element. Handles closing the
+         * menu.
+         */
+        this.onKeydown = (event) => {
+            if (this.host.keepOpen || event.defaultPrevented)
+                return;
+            const keyCode = event.code;
+            if (!event.defaultPrevented && isClosableKey(keyCode)) {
+                event.preventDefault();
+                this.host.dispatchEvent(createDefaultCloseMenuEvent(this.host, { kind: CloseReason.KEYDOWN, key: keyCode }));
+            }
+        };
+        const { getHeadlineElements, } = config;
+        this.getHeadlineElements = getHeadlineElements;
+        this.host.addController(this);
+    }
+    /**
+     * The text that is selectable via typeahead. If not set, defaults to the
+     * innerText of the item slotted into the `"headline"` slot.
+     */
+    get typeaheadText() {
+        if (this.internalTypeaheadText !== null) {
+            return this.internalTypeaheadText;
+        }
+        const headlineElements = this.getHeadlineElements();
+        const textParts = [];
+        headlineElements.forEach((headlineElement) => {
+            if (headlineElement.textContent && headlineElement.textContent.trim()) {
+                textParts.push(headlineElement.textContent.trim());
+            }
+        });
+        return textParts.join(' ');
+    }
+    /**
+     * The recommended tag name to render as the list item.
+     */
+    get tagName() {
+        const type = this.host.type;
+        switch (type) {
+            case 'link':
+                return 'a';
+            case 'button':
+                return 'button';
+            default:
+            case 'menuitem':
+            case 'option':
+                return 'li';
+        }
+    }
+    /**
+     * The recommended role of the menu item.
+     */
+    get role() {
+        return this.host.type === 'option' ? 'option' : 'menuitem';
+    }
+    hostConnected() {
+        this.host.toggleAttribute('md-menu-item', true);
+    }
+    hostUpdate() {
+        if (this.host.href) {
+            this.host.type = 'link';
+        }
+    }
+    /**
+     * Use to set the typeaheadText when it changes.
+     */
+    setTypeaheadText(text) {
+        this.internalTypeaheadText = text;
+    }
+}
+//# sourceMappingURL=menuItemController.js.map

package/menu/internal/controllers/menuItemController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menuItemController.js","sourceRoot":"","sources":["menuItemController.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ReactiveController, ReactiveControllerHost} from 'lit';\n\nimport {CloseReason, createDefaultCloseMenuEvent, isClosableKey} from './shared.js';\n\n/**\n * Interface specific to menu item and not HTMLElement.\n *\n * NOTE: required properties are expected to be reactive.\n */\ninterface MenuItemAdditions {\n  /**\n   * Whether or not the item is in the disabled state.\n   */\n  disabled: boolean;\n  /**\n   * The text of the item that will be used for typeahead. If not set, defaults\n   * to the textContent of the element slotted into the headline.\n   */\n  typeaheadText: string;\n  /**\n   * Whether or not the item is in the selected visual state.\n   */\n  selected: boolean;\n  /**\n   * Sets the behavior and role of the menu item, defaults to \"menuitem\".\n   */\n  type: MenuItemType;\n  /**\n   * Whether it should keep the menu open after click.\n   */\n  keepOpen?: boolean;\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n   */\n  href?: string;\n  /**\n   * Focuses the item.\n   */\n  focus: () => void;\n}\n\n/**\n * The interface of every menu item interactive with a menu. All menu items\n * should implement this interface to be compatible with md-menu. Additionally\n * it should have the `md-menu-item` attribute set.\n *\n * NOTE, the required properties are recommended to be reactive properties.\n */\nexport type MenuItem = MenuItemAdditions&HTMLElement;\n\n/**\n * Supported behaviors for a menu item.\n */\nexport type MenuItemType = 'menuitem'|'option'|'button'|'link';\n\n/**\n * The options used to inialize MenuItemController.\n */\nexport interface MenuItemControllerConfig {\n  /**\n   * A function that returns the headline element of the menu item.\n   */\n  getHeadlineElements: () => HTMLElement[];\n}\n\n/**\n * A controller that provides most functionality of an element that implements\n * the MenuItem interface.\n */\nexport class MenuItemController implements ReactiveController {\n  private internalTypeaheadText: string|null = null;\n  private readonly getHeadlineElements:\n      MenuItemControllerConfig['getHeadlineElements'];\n\n  /**\n   * @param host The MenuItem in which to attach this controller to.\n   * @param config The object that configures this controller's behavior.\n   */\n  constructor(\n      private readonly host: ReactiveControllerHost&MenuItem,\n      config: MenuItemControllerConfig) {\n    const {\n      getHeadlineElements,\n    } = config;\n    this.getHeadlineElements = getHeadlineElements;\n    this.host.addController(this);\n  }\n\n  /**\n   * The text that is selectable via typeahead. If not set, defaults to the\n   * innerText of the item slotted into the `\"headline\"` slot.\n   */\n  get typeaheadText() {\n    if (this.internalTypeaheadText !== null) {\n      return this.internalTypeaheadText;\n    }\n\n    const headlineElements = this.getHeadlineElements();\n\n    const textParts: string[] = [];\n    headlineElements.forEach((headlineElement) => {\n      if (headlineElement.textContent && headlineElement.textContent.trim()) {\n        textParts.push(headlineElement.textContent.trim());\n      }\n    });\n\n    return textParts.join(' ');\n  }\n\n  /**\n   * The recommended tag name to render as the list item.\n   */\n  get tagName() {\n    const type = this.host.type;\n\n    switch (type) {\n      case 'link':\n        return 'a' as const;\n      case 'button':\n        return 'button' as const;\n      default:\n      case 'menuitem':\n      case 'option':\n        return 'li' as const;\n    }\n  }\n\n  /**\n   * The recommended role of the menu item.\n   */\n  get role() {\n    return this.host.type === 'option' ? 'option' : 'menuitem';\n  }\n\n  hostConnected() {\n    this.host.toggleAttribute('md-menu-item', true);\n  }\n\n  hostUpdate() {\n    if (this.host.href) {\n      this.host.type = 'link';\n    }\n  }\n\n  /**\n   * Bind this click listener to the interactive element. Handles closing the\n   * menu.\n   */\n  onClick = () => {\n    if (this.host.keepOpen) return;\n\n    this.host.dispatchEvent(createDefaultCloseMenuEvent(\n        this.host, {kind: CloseReason.CLICK_SELECTION}));\n  };\n\n  /**\n   * Bind this click listener to the interactive element. Handles closing the\n   * menu.\n   */\n  onKeydown = (event: KeyboardEvent) => {\n    if (this.host.keepOpen || event.defaultPrevented) return;\n    const keyCode = event.code;\n\n    if (!event.defaultPrevented && isClosableKey(keyCode)) {\n      event.preventDefault();\n      this.host.dispatchEvent(createDefaultCloseMenuEvent(\n          this.host, {kind: CloseReason.KEYDOWN, key: keyCode}));\n    }\n  };\n\n  /**\n   * Use to set the typeaheadText when it changes.\n   */\n  setTypeaheadText(text: string) {\n    this.internalTypeaheadText = text;\n  }\n}"]}