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

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

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ListItemLinkOnly as ListItemLink } from './lib/listitemlink/list-item-link-only.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-list-item-link': MdListItemLink;
+    }
+}
+/**
+ * @summary
+ * Lists are continuous, vertical indexes of text or images. Items are placed
+ * inside the list. This is a linkable variant.
+ *
+ * @description
+ * Lists consist of one or more list items, and can contain actions represented
+ * by icons and text. List items come in three sizes: one-line, two-line, and
+ * three-line.
+ *
+ * __Takeaways:__
+ *
+ * - Lists should be sorted in logical ways that make content easy to scan, such
+ *   as alphabetical, numerical, chronological, or by user preference.
+ * - Lists present content in a way that makes it easy to identify a specific
+ *   item in a collection and act on it.
+ * - Lists should present icons, text, and actions in a consistent format.
+ *
+ * Example slottable child variants are:
+ *
+ * - `video[data-variant=video]`
+ * - `img,span[data-variant=avatar]`
+ * - `img[data-variant=image]`
+ * - `md-icon[data-variant=icon]`
+ *
+ *  @example
+ * ```html
+ * <md-list-item-link
+ *     headline="User Name"
+ *     supportingText="user@name.com"
+ *     href="/accounts">
+ *   <md-icon data-variant="icon" slot="start">account_circle</md-icon>
+ *   <md-icon data-variant="icon" slot="end">open_in_new</md-icon>
+ * </md-list-item-link>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdListItemLink extends ListItemLink {
+    static styles: import("lit").CSSResult[];
+}

package/list/list-item-link.js

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { styles as forcedColors } from './lib/listitem/forced-colors-styles.css.js';
+import { styles } from './lib/listitem/list-item-styles.css.js';
+import { ListItemLinkOnly as ListItemLink } from './lib/listitemlink/list-item-link-only.js';
+/**
+ * @summary
+ * Lists are continuous, vertical indexes of text or images. Items are placed
+ * inside the list. This is a linkable variant.
+ *
+ * @description
+ * Lists consist of one or more list items, and can contain actions represented
+ * by icons and text. List items come in three sizes: one-line, two-line, and
+ * three-line.
+ *
+ * __Takeaways:__
+ *
+ * - Lists should be sorted in logical ways that make content easy to scan, such
+ *   as alphabetical, numerical, chronological, or by user preference.
+ * - Lists present content in a way that makes it easy to identify a specific
+ *   item in a collection and act on it.
+ * - Lists should present icons, text, and actions in a consistent format.
+ *
+ * Example slottable child variants are:
+ *
+ * - `video[data-variant=video]`
+ * - `img,span[data-variant=avatar]`
+ * - `img[data-variant=image]`
+ * - `md-icon[data-variant=icon]`
+ *
+ *  @example
+ * ```html
+ * <md-list-item-link
+ *     headline="User Name"
+ *     supportingText="user@name.com"
+ *     href="/accounts">
+ *   <md-icon data-variant="icon" slot="start">account_circle</md-icon>
+ *   <md-icon data-variant="icon" slot="end">open_in_new</md-icon>
+ * </md-list-item-link>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdListItemLink = class MdListItemLink extends ListItemLink {
+};
+MdListItemLink.styles = [styles, forcedColors];
+MdListItemLink = __decorate([
+    customElement('md-list-item-link')
+], MdListItemLink);
+export { MdListItemLink };
+//# sourceMappingURL=list-item-link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-item-link.js","sourceRoot":"","sources":["list-item-link.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,MAAM,EAAC,MAAM,wCAAwC,CAAC;AAC9D,OAAO,EAAC,gBAAgB,IAAI,YAAY,EAAC,MAAM,2CAA2C,CAAC;AAQ3F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,YAAY;;AAC9B,qBAAM,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AADrC,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CAE1B;SAFY,cAAc","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 {styles} from './lib/listitem/list-item-styles.css.js';\nimport {ListItemLinkOnly as ListItemLink} from './lib/listitemlink/list-item-link-only.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list-item-link': MdListItemLink;\n  }\n}\n\n/**\n * @summary\n * Lists are continuous, vertical indexes of text or images. Items are placed\n * inside the list. This is a linkable variant.\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 * Example 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-link\n *     headline=\"User Name\"\n *     supportingText=\"user@name.com\"\n *     href=\"/accounts\">\n *   <md-icon data-variant=\"icon\" slot=\"start\">account_circle</md-icon>\n *   <md-icon data-variant=\"icon\" slot=\"end\">open_in_new</md-icon>\n * </md-list-item-link>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list-item-link')\nexport class MdListItemLink extends ListItemLink {\n  static override styles = [styles, forcedColors];\n}\n"]}

package/list/list-item.d.ts

@@ -3,14 +3,50 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { ListItem } from './lib/listitem/list-item.js';
+import { ListItemOnly as ListItem } from './lib/listitem/list-item-only.js';
+export { ListItemRole } from './lib/listitem/list-item.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-list-item': MdListItem;
     }
 }
 /**
- * @soyCompatible
+ * @summary
+ * Lists are continuous, vertical indexes of text or images. Items are placed
+ * inside the list.
+ *
+ * @description
+ * Lists consist of one or more list items, and can contain actions represented
+ * by icons and text. List items come in three sizes: one-line, two-line, and
+ * three-line.
+ *
+ * __Takeaways:__
+ *
+ * - Lists should be sorted in logical ways that make content easy to scan, such
+ *   as alphabetical, numerical, chronological, or by user preference.
+ * - Lists present content in a way that makes it easy to identify a specific
+ *   item in a collection and act on it.
+ * - Lists should present icons, text, and actions in a consistent format.
+ *
+ * Acceptable slottable child variants are:
+ *
+ * - `video[data-variant=video]`
+ * - `img,span[data-variant=avatar]`
+ * - `img[data-variant=image]`
+ * - `md-icon[data-variant=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-list-item>
+ * ```
+ *
+ * @example
+ *
  * @final
  * @suppress {visibility}
  */

package/list/list-item.js

@@ -5,16 +5,52 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { ListItem } from './lib/listitem/list-item.js';
+import { styles as forcedColors } from './lib/listitem/forced-colors-styles.css.js';
+import { ListItemOnly as ListItem } from './lib/listitem/list-item-only.js';
 import { styles } from './lib/listitem/list-item-styles.css.js';
 /**
- * @soyCompatible
+ * @summary
+ * Lists are continuous, vertical indexes of text or images. Items are placed
+ * inside the list.
+ *
+ * @description
+ * Lists consist of one or more list items, and can contain actions represented
+ * by icons and text. List items come in three sizes: one-line, two-line, and
+ * three-line.
+ *
+ * __Takeaways:__
+ *
+ * - Lists should be sorted in logical ways that make content easy to scan, such
+ *   as alphabetical, numerical, chronological, or by user preference.
+ * - Lists present content in a way that makes it easy to identify a specific
+ *   item in a collection and act on it.
+ * - Lists should present icons, text, and actions in a consistent format.
+ *
+ * Acceptable slottable child variants are:
+ *
+ * - `video[data-variant=video]`
+ * - `img,span[data-variant=avatar]`
+ * - `img[data-variant=image]`
+ * - `md-icon[data-variant=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-list-item>
+ * ```
+ *
+ * @example
+ *
  * @final
  * @suppress {visibility}
  */
 let MdListItem = class MdListItem extends ListItem {
 };
-MdListItem.styles = [styles];
+MdListItem.styles = [styles, forcedColors];
 MdListItem = __decorate([
     customElement('md-list-item')
 ], MdListItem);

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,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,MAAM,EAAC,MAAM,wCAAwC,CAAC;AAQ9D;;;;GAIG;AAEH,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 {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 * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list-item')\nexport class MdListItem extends ListItem {\n  static override styles = [styles];\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,4CAA4C,CAAC;AAClF,OAAO,EAAC,YAAY,IAAI,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAC1E,OAAO,EAAC,MAAM,EAAC,MAAM,wCAAwC,CAAC;AAU9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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 {ListItemOnly as ListItem} from './lib/listitem/list-item-only.js';\nimport {styles} from './lib/listitem/list-item-styles.css.js';\n\nexport {ListItemRole} from './lib/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 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"]}

package/list/list.d.ts

@@ -10,7 +10,21 @@ declare global {
     }
 }
 /**
- * @soyCompatible
+ * @summary Lists are continuous, vertical indexes of text or images.
+ *
+ * @description
+ * Lists consist of one or more list items, and can contain actions represented
+ * by icons and text. List items come in three sizes: one-line, two-line, and
+ * three-line.
+ *
+ * __Takeaways:__
+ *
+ * - Lists should be sorted in logical ways that make content easy to scan, such
+ *   as alphabetical, numerical, chronological, or by user preference.
+ * - Lists present content in a way that makes it easy to identify a specific
+ *   item in a collection and act on it.
+ * - Lists should present icons, text, and actions in a consistent format.
+ *
  * @final
  * @suppress {visibility}
  */

package/list/list.js

@@ -8,7 +8,21 @@ import { customElement } from 'lit/decorators.js';
 import { List } from './lib/list.js';
 import { styles } from './lib/list-styles.css.js';
 /**
- * @soyCompatible
+ * @summary Lists are continuous, vertical indexes of text or images.
+ *
+ * @description
+ * Lists consist of one or more list items, and can contain actions represented
+ * by icons and text. List items come in three sizes: one-line, two-line, and
+ * three-line.
+ *
+ * __Takeaways:__
+ *
+ * - Lists should be sorted in logical ways that make content easy to scan, such
+ *   as alphabetical, numerical, chronological, or by user preference.
+ * - Lists present content in a way that makes it easy to identify a specific
+ *   item in a collection and act on it.
+ * - Lists should present icons, text, and actions in a consistent format.
+ *
  * @final
  * @suppress {visibility}
  */

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;;;;GAIG;AAEH,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 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 * @soyCompatible\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,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"]}

package/menu/_menu-item.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/menuitem/menu-item' show theme;

package/menu/_menu.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/menu' show theme;

package/menu/harness.d.ts

@@ -6,10 +6,16 @@
 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';
 /**
  * Test harness for menu.
  */
 export declare class MenuHarness extends Harness<Menu> {
+    /**
+     * Shows the menu and returns the first list item element.
+     */
+    protected getInteractiveElement(): Promise<HTMLElement>;
     /** @return ListItem harnesses for the menu's items. */
     getItems(): MenuItemHarness[];
+    show(quick?: boolean): Promise<void>;
 }

package/menu/harness.js

@@ -5,13 +5,36 @@
  */
 import { Harness } from '../testing/harness.js';
 import { MenuItemHarness } from './lib/menuitem/harness.js';
+export { MenuItemHarness } from './lib/menuitem/harness.js';
 /**
  * Test harness for menu.
  */
 export class MenuHarness extends Harness {
+    /**
+     * Shows the menu and returns the first list item element.
+     */
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        await this.show();
+        return (await this.getItems())[0].getInteractiveElement();
+    }
     /** @return ListItem harnesses for the menu's items. */
     getItems() {
         return this.element.items.map((item) => new MenuItemHarness(item));
     }
+    async show(quick = true) {
+        const menu = this.element;
+        menu.quick = quick;
+        if (menu.open) {
+            return;
+        }
+        const opened = new Promise((resolve) => {
+            menu.addEventListener('opened', () => {
+                resolve(true);
+            }, { once: true });
+        });
+        menu.show();
+        await opened;
+    }
 }
 //# sourceMappingURL=harness.js.map

package/menu/harness.js.map

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

package/menu/lib/_menu.scss

@@ -3,106 +3,101 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
+// go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
-
-@use '../../elevation/lib/elevation';
-@use '../../list/list';
+@use 'sass:string';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../elevation/elevation';
+@use '../../focus/focus-ring';
+@use '../../internal/sass/theme';
+@use '../../list/list' as md-list;
 @use '../../list/list-item';
-@use '../../menusurface/menu-surface';
-@use '../../sass/resolvers';
-@use '../../sass/theme';
 @use '../../tokens';
+// go/keep-sorted end
 
-$_custom-property-prefix: 'menu';
-
-@mixin theme($theme) {
-  $theme: theme.validate-theme(tokens.md-comp-menu-values(), $theme);
-  $theme: _resolve-tokens($tokens);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(tokens.md-comp-menu-values(), $tokens);
 
-  @include theme.emit-theme-vars($theme);
+  @each $token, $value in $tokens {
+    @if $value {
+      --md-menu-#{$token}: #{$value};
+    }
+  }
 }
 
 @mixin styles() {
   $tokens: tokens.md-comp-menu-values();
-  $tokens: _resolve-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-menu-#{$token}, #{$value});
     }
-  }
 
-  .md3-menu {
-    @include menu-surface.theme(
+    @include md-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),
       )
     );
-    @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),
       )
     );
+
+    min-width: 300px;
   }
-}
 
-@function _resolve-tokens($tokens) {
-  $tokens: elevation.resolve-tokens($tokens, 'container-elevation');
-  @return $tokens;
+  .menu {
+    border-radius: var(--_container-shape);
+    display: none;
+    opacity: 0;
+    z-index: 20;
+    position: absolute;
+    user-select: none;
+    max-height: inherit;
+    height: inherit;
+    min-width: inherit;
+
+    &.fixed {
+      position: fixed;
+    }
+
+    md-list {
+      height: inherit;
+      max-height: inherit;
+      display: block;
+      overflow: auto;
+      min-width: inherit;
+      border-radius: inherit;
+    }
+
+    &.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;
+    }
+  }
 }

package/menu/lib/forced-colors-styles.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"forced-colors-styles.css.js","sourceRoot":"","sources":["forced-colors-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`@media(forced-colors: active){.menu{border-style:solid;border-color:CanvasText;border-width:1px}}/*# sourceMappingURL=forced-colors-styles.css.map */\n`;\n "]}

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

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

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

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

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

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